Using <angular/> markup like {{hash}} in an href attribute makes
the page open to a wrong URL, ff the user clicks that link before
angular has a chance to replace the {{hash}} with actual URL, the
link will be broken and will most likely return a 404 error.
The ng:href
solves this problem by placing the href
in the
ng:
namespace.
The buggy way to write it:
<a href="http://www.gravatar.com/avatar/{{hash}}"/>
The correct way to write it:
<a ng:href="http://www.gravatar.com/avatar/{{hash}}"/>
<ANY ng:href="template"> ... </ANY>
template – {template} –
any string which can contain {{}}
markup.
This example uses link
variable inside href
attribute:
<input name="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'}}" ng:click="value = 3">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 hash)
it('should execute ng:click but not reload when href without value', function() { element('#link-1').click(); expect(element('input[name=value]').val()).toEqual('1'); expect(element('#link-1').attr('href')).toBe(""); }); it('should execute ng:click but not reload when href empty string', function() { element('#link-2').click(); expect(element('input[name=value]').val()).toEqual('2'); expect(element('#link-2').attr('href')).toBe(""); }); it('should execute ng:click and change url when ng:href specified', function() { element('#link-3').click(); expect(element('input[name=value]').val()).toEqual('3'); expect(element('#link-3').attr('href')).toBe("#123"); expect(browser().location().hash()).toEqual('123'); }); it('should execute ng:click but not reload when href empty string and name specified', function() { element('#link-4').click(); expect(element('input[name=value]').val()).toEqual('4'); expect(element('#link-4').attr('href')).toBe(""); }); it('should execute ng:click but not reload when no href but name specified', function() { element('#link-5').click(); expect(element('input[name=value]').val()).toEqual('5'); expect(element('#link-5').attr('href')).toBe(undefined); }); it('should only change url when only ng:href', function() { input('value').enter('6'); element('#link-6').click(); expect(browser().location().hash()).toEqual('/6'); expect(element('#link-6').attr('href')).toBe("#/6"); });