244

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

// 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">

4

8 に答える 8

432

ルートはサービスを監視し$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>
于 2013-01-07T19:14:38.933 に答える
33

カスタム属性 (ディレクティブで実装) を使用するのが、おそらく最もクリーンな方法です。@Josh と @sean の提案に基づいた私のバージョンを次に示します。

angular.module('mymodule', [])

// Click to navigate
// similar to <a href="#/partial"> but hash is not required, 
// e.g. <div click-link="/partial">
.directive('clickLink', ['$location', function($location) {
    return {
        link: function(scope, element, attrs) {
            element.on('click', function() {
                scope.$apply(function() {
                    $location.path(attrs.clickLink);
                });
            });
        }
    }
}]);

いくつかの便利な機能がありますが、Angular は初めてなので、おそらく改善の余地があります。

于 2013-09-25T02:00:04.540 に答える
4

ルーティングに ng-click を使用する場合、要素を右クリックして [新しいタブで開く] を選択することも、ctrl キーを押しながらリンクをクリックすることもできないことに注意してください。ナビゲーションに関しては、ng-href を使用しようとしています。ng-click は、操作や折りたたみなどの視覚効果のボタンで使用するのに適しています。しかし、私はお勧めしません。ルートを変更すると、アプリ内の多くの場所で変更が必要になる場合があります。リンクを返すメソッドを用意します。例：約。ユーティリティに配置するこのメソッド

于 2015-11-16T12:36:57.383 に答える
0

以下を使用できます。

<a ng-href="#/about">About</a>

href内に動的変数が必要な場合は、次のようにします。

<a ng-href="{{link + 123}}">Link to 123</a>

linkはAngularスコープ変数です。

于 2015-09-19T11:33:41.380 に答える