Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-03-16 23:30:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix IE bug - ng:href

Browse source 
ng:href was producing unclickable links, as the event propagation was stopped by 'a' widget

All links in regression/issue-352.html were tested in:

* Chrome 11
* Opera 11
* Firefox 4
* IE7, IE8

Closes #352
This commit is contained in:
Vojta Jina 2011-05-31 14:51:47 +02:00 committed by Igor Minar
parent dad2603752
commit 4b0f2dfe0c
3 changed files with 75 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
regression/issue-352.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE HTML>
<html xmlns:ng="http://angularjs.org">
<script type="text/javascript" src="../build/angular.js" ng:autobind></script>
<body ng:init="scope = { itemId: 12345 }">
<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)
</body>
</html>

53
src/markups.js
View file

@ -105,6 +105,59 @@ angularTextMarkup('option', function(text, textNode, parentElement){
*
* @element ANY
* @param {template} template any string which can contain `{{}}` markup.
*
* @example
* This example uses `link` variable inside `href` attribute:
<doc:example>
<doc:source>
<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)
</doc:source>
<doc:scenario>
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");
});
</doc:scenario>
</doc:example>
*/
/**

10
src/widgets.js
View file

@ -821,7 +821,15 @@ angularWidget('a', function() {
this.directives(true);
return function(element) {
if (element.attr('href') === '') {
var hasNgHref = ((element.attr('ng:bind-attr') || '').indexOf('"href":') !== -1);
// turn <a href ng:click="..">link</a> into a link in IE
// but only if it doesn't have name attribute, in which case it's an anchor
if (!hasNgHref && !element.attr('name') && !element.attr('href')) {
element.attr('href', '');
}
if (element.attr('href') === '' && !hasNgHref) {
element.bind('click', function(event){
event.preventDefault();
});