Angular.js：如何在模板中使用ng-href？ [英] Angular.js : How to use ng-href in template?
问题描述
我尝试创建一个包含模板的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 =＃/ myPagetarget =_ self>链接< / a> <！ - 工作！ - >
< div class =containerng-view =>< / div>
< / body>
...
app.js：
'use strict';
$ b 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 =＃/ myPagetarget =_ self>链接< / a> <！ - 不工作 - >
< a ng-href =＃/ myPagetarget =_ self>链接< / a> <！ - 不工作 - >
< a ng-href =＃/ myPage {{}}>连结< / a> <！ - 不工作 - >
< a ng-href =＃/ {{'myPage'}}>链接< / a> <！ - 不工作 - >
< a href =＃/ myPagetarget =_ self>连结< / a> <！ - 工作！ - >
< / div>
我不明白ng-href的问题以及结果与href不同的原因。
我使用的角度为1.2
ngHref 用于将角度变量动态绑定到href属性如下： />带我去某处< / a>
在您的范围内：
$ scope.myPathVariable ='path / to / somewhere';
然后，在角度编译之后，它看起来像这样：
< a ng-href =＃/ path / to / somewherehref =＃/ path / to / somewhere...其他角度属性> Take Me某处< / A>
如果您的路径被硬编码到页面中（您知道链接应该在页面加载时将您带到哪里） ，你可以在href中指定它，这就是你的第三个例子工作的原因。只有在需要角度才能在JS加载后动态决定路由时，才使用 ngHref 。这可以防止用户在链接应该指向的角度解密之前单击链接并转到无效路由。文档此处
I try to create a simple SPA with 1 index.html which include templates.
I got a problem with ng-href directive:
<a ng-href="#/myPage">myPage</a>
work in index.html but not in my templates, the link is unclickable. but href still works.
<a href="#/myPage">myPage</a>
My app :
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>
I don't understand the problem with ng-href and why the result is different than href. I use angular 1.2
ngHref is used to dynamically bind angular variables to the href attribute like so:
<a ng-href="#/{{myPathVariable}}"/>Take Me Somewhere</a>
Where in your scope:
$scope.myPathVariable = 'path/to/somewhere';
Then after angular compiles it, it looks like this:
<a ng-href="#/path/to/somewhere" href="#/path/to/somewhere" ... other angular attributes>Take Me Somewhere</a>
If your path is hardcoded into the page (you know where the link should take you on page load), you can just specify it in an href, which is why your third example works. Only use ngHref when you need angular to decide the route dynamically after the JS loads. This prevents your user from clicking links and going to an invalid route before angular has deciphered where the link should point. Documentation here
这篇关于Angular.js：如何在模板中使用ng-href？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
