Question

我尝试创建一个带有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不同的原因。我用角度1.2

Answer 1

ngHref用于将角度变量动态绑定到href属性，如下所示：

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

你的范围：

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

然后在角度编译后，它看起来像这样：

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

如果您的路径被硬编码到页面中（您知道链接应该在页面加载时占用的位置），您可以在href中指定它，这就是您的第三个示例有效的原因。只有在需要角度时才使用ngHref来在JS加载后动态决定路径。这可以防止用户在角度已解密链接应指向的位置之前单击链接并转到无效路径。文档here

Angular.js：如何在模板中使用ng-href？

1 个答案: