1. ホーム
  2. angularjs

[解決済み】ルートを呼び出すためにng-clickをどのように/いつ使用するのか?

2022-04-02 15:36:55

質問

ルートを使用するとします。

// bootstrap
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

    $routeProvider.when('/home', {
        templateUrl: 'partials/home.html',
        controller: 'HomeCtrl'
    });
    $routeProvider.when('/about', {
        templateUrl: 'partials/about.html',
        controller: 'AboutCtrl'
    });
...

そして、htmlでは、ボタンがクリックされたときに、aboutのページに移動したい。 一つの方法として

<a href="#/about">

...が、ここでもng-clickが役に立ちそうです。

  1. その仮定は正しいですか? アンカーの代わりにng-clickが使われるということですか?
  2. もしそうなら、どのように動作するのでしょうか? IEです。

<div ng-click="/about">

解決方法は?

ルートは $location サービスを使用し、URLの変更に応答します(通常はハッシュを使用します)。ルートを有効にするには、単にURLを変更するだけです。これを行う最も簡単な方法は、アンカータグを使用することです。

<a href="#/home">Go Home</a>
<a href="#/about">Go to About</a>

これ以上複雑なことは必要ありません。しかし、もしこれをコードから行う必要があるならば、適切な方法は $location サービスです。

$scope.go = function ( path ) {
  $location.path( path );
};

例えば、ボタンで起動させることができます。

<button ng-click="go('/home')"></button>