©
이 문서에서는PHP 중국어 웹사이트 매뉴얼풀어 주다
在href属性使用Angular的{{hash}}
等标记会使链接跳转到错误的URL,当用户在Angular用值替换{{hash}}
标记前点击了它。在Angular替换标记前链接都是错误的,会返回类似404错误。
ngHref
指令解决了这个问题。
错误的写法:
href="http://www.gravatar.com/avatar/{{hash}}"/>
正确的写法:
ng-href="http://www.gravatar.com/avatar/{{hash}}"/>
ng-href="">...
参数 | 类型 | 详述 |
---|---|---|
ngHref | template | 可以包含 |
这个例子演示几种在链接中使用href
、ng-href
和ng-click
属性的组合,以及它们不同的行为:
ng-model="value"/>
/>id="link-1"hrefng-click="value = 1">link 1(link, don't reload)
/>id="link-2"href=""ng-click="value = 2">link 2(link, don't reload)
/>id="link-3"ng-href="/{{'123'}}">link 3(link, reload!)
/>id="link-4"href=""name="xx"ng-click="value = 4">anchor(link, don't reload)
/>id="link-5"name="xxx"ng-click="value = 5">anchor(no link)
/>id="link-6"ng-href="{{value}}">link(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(){returnbrowser.driver.getCurrentUrl().then(Function(url){returnurl.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(){returnbrowser.driver.getCurrentUrl().then(Function(url){returnurl.match(/\/6$/);});},5000,'page should navigate to /6');});