Angular.js :如何在模板中使用ng-href？
Angular.js :如何在模板中使用ng-href？
提问于 2014-05-22 15:22:43
我尝试用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
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-05-22 15:53:48
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中指定它，这就是第三个示例工作的原因。只有在JS加载后需要角度来动态确定路由时才使用ngHref。这会阻止你的用户点击链接，进入一个无效的路径之前，角已经破译了链接应该指向的位置。文档here
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23810995
复制相关文章
相似问题
腾讯云开发者
