©
This document uses PHP Chinese website manual Release
在href属性使用Angular的{{hash}}等标记会使链接跳转到错误的URL，当用户在Angular用值替换 {{hash}}标记前点击了它。在Angular替换标记前链接都是错误的，会返回类似404错误。
ngHref指令解决了这个问题。
错误的写法：
<a href="http://www.gravatar.com/avatar/{{hash}}"/>正确的写法：
<a ng-href="http://www.gravatar.com/avatar/{{hash}}"/><A
ng-href="">
...
</A>| 参数 | 类型 | 详述 |
|---|---|---|
| ngHref | template | 可以包含 |
这个例子演示几种在链接中使用 href、ng-href和ng-click 属性的组合，以及它们不同的行为：
<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-3" ng-href="/{{'123'}}">link 3</a> (link, reload!)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />
<a id="link-6" ng-href="{{value}}">link</a> (link, change location)it('should execute ng-click but not reload when href without value', Function() {
element(by.id('link-1')).click();
expect(element(by.model('value')).getAttribute('value')).toEqual('1');
expect(element(by.id('link-1')).getAttribute('href')).toBe('');});
it('should execute ng-click but not reload when href empty string', Function() {
element(by.id('link-2')).click();
expect(element(by.model('value')).getAttribute('value')).toEqual('2');
expect(element(by.id('link-2')).getAttribute('href')).toBe('');});
it('should execute ng-click and change url when ng-href specified', Function() {
expect(element(by.id('link-3')).getAttribute('href')).toMatch(/\/123$/);
element(by.id('link-3')).click();
// At this point, we navigate away from an Angular page, so we need
// to use browser.driver to get the base webdriver.
browser.wait(Function() {
return browser.driver.getCurrentUrl().then(Function(url) {
return url.match(/\/123$/);
});
}, 5000, 'page should navigate to /123');});
xit('should execute ng-click but not reload when href empty string and name specified', Function() {
element(by.id('link-4')).click();
expect(element(by.model('value')).getAttribute('value')).toEqual('4');
expect(element(by.id('link-4')).getAttribute('href')).toBe('');});
it('should execute ng-click but not reload when no href but name specified', Function() {
element(by.id('link-5')).click();
expect(element(by.model('value')).getAttribute('value')).toEqual('5');
expect(element(by.id('link-5')).getAttribute('href')).toBe(null);});
it('should only change url when only ng-href', Function() {
element(by.model('value')).clear();
element(by.model('value')).sendKeys('6');
expect(element(by.id('link-6')).getAttribute('href')).toMatch(/\/6$/);
element(by.id('link-6')).click();
// At this point, we navigate away from an Angular page, so we need
// to use browser.driver to get the base webdriver.
browser.wait(Function() {
return browser.driver.getCurrentUrl().then(Function(url) {
return url.match(/\/6$/);
});
}, 5000, 'page should navigate to /6');});