☰

ng-click を使用してルートを呼び出す方法とタイミングは? 質問する

tag-icon • tag-icon angularjs routes angularjs-routing angularjs-ng-click angularjs-ng-route
ng-click を使用してルートを呼び出す方法とタイミングは? 質問する

ルートを使用しているとします:

// 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ページに移動したいとします。1つの方法は

<a href="#/about">

...しかし、ここでも ng-click が役に立つようです。

  1. その仮定は正しいですか? アンカーの代わりに ng-click が使用されるということですか?
  2. もしそうなら、それはどのように機能するのでしょうか? 例えば:

<div ng-click="/about">

ベストアンサー1

ルートは$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>

おすすめ記事