Angular.js: Как использовать ng-href в шаблоне?

Я пытаюсь создать простой SPA с 1 index.html, который включает в себя шаблоны.

У меня возникла проблема с директивой 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

Ответ 1

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, поэтому ваш третий пример работает. Используйте ngHref только тогда, когда вам понадобится angular, чтобы динамически определять маршрут после загрузки JS. Это предотвратит доступ вашего пользователя к ссылкам и переходу на недействительный маршрут до того, как angular расшифрует, где должна указываться ссылка. Документация здесь