web-dev-qa-db-ja.com

Angular.js：テンプレートでng-hrefを使用する方法は？

テンプレートを含む1つのindex.htmlを持つ単純なSPAを作成しようとしています。

Ng-hrefディレクティブで問題が発生しました：

 <a ng-href="#/myPage">myPage</a>

index.htmlで動作しますが、テンプレートでは動作しません。リンクはクリックできません。しかし、hrefは引き続き機能します。

<a href="#/myPage">myPage</a>

マイアプリ：

index.html：

...
<body ng-app="myApp">
    <a ng-href="#/myPage" target="_self">link</a> <!-- work ! -->
    <div class="container" ng-view=""></div>
</body>
...

app.js：

'use strict';

angular.module('myApp',
        [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute' ]).config(
        function($routeProvider) {
            $routeProvider.when('/', {
                templateUrl : 'views/main.tpl.html',
                controller : 'MainCtrl'
            })

            .when('/myPage', {
                templateUrl : 'views/page.tpl.html',
                controller : 'MainCtrl'
            })

            .otherwise({
                redirectTo : '/'
            });
        });

controller.js

'use strict';

    myApp.controller('MainCtrl', function() {
        this.myColor = 'blue';
    });

page.tpl.html

<div>
    <a ng-href="#/myPage" target="_self">link</a> <!-- Dont work -->
    <a ng-href="#/myPage" target="_self">link</a> <!-- Dont work -->
    <a ng-href="#/myPage{{}}">link</a> <!-- Dont work -->
    <a ng-href="#/{{ 'myPage' }}">link</a> <!-- Dont work -->
    <a href="#/myPage" target="_self">link</a> <!-- Work ! -->
</div>

Ng-hrefの問題と、結果がhrefと異なる理由がわかりません。 angular 1.2を使用します

javascripthtmlangularjstemplates
27
Thomas

ngHrefは、次のようにangular変数をhref属性に動的にバインドするために使用されます。

<a ng-href="#/{{myPathVariable}}"/>Take Me Somewhere</a>

あなたの範囲内の場所：

$scope.myPathVariable = 'path/to/somewhere';

次に、angularがコンパイルすると、次のようになります。

<a ng-href="#/path/to/somewhere" href="#/path/to/somewhere" ... other angular attributes>Take Me Somewhere</a>

パスがページにハードコーディングされている場合（リンクがページの読み込み時に必要な場所を知っている場合）、hrefで指定するだけで、3番目の例が機能します。 angularが必要な場合にのみngHrefを使用して、JSのロード後にルートを動的に決定します。これにより、ユーザーがangularリンクが指すべき場所を解読しました。ドキュメント here

48
Mike Quinlan