ng:href produces unclickable links on IE7 #352

idosela · 2011-05-25T21:16:30Z

Angular is updating the href attribute properly, but clicking on the link does not result in location change.

<body ng:init="scope = { itemId: 12345 }">

  <a ng:href="#/item/{{scope.itemId}}">test</a>

</body>

xenomonkey · 2011-05-27T22:12:25Z

I found one of the pieces of code responsible.

/* 
  * Modifies the default behavior of html A tag, so that the default 
action is prevented when href 
  * attribute is empty. 
  * 
  * The reasoning for this change is to allow easy creation of action 
links with ng:click without 
  * changing the location or causing page reloads, e.g.: 
  * <a href="" ng:click="model.$save()">Save</a> 
  */ 
angularWidget('a', function() { 
   this.descend(true); 
   this.directives(true); 
   return function(element) { 
     if (element.attr('href') === '') { 
       element.bind('click', function(event){ 
         event.preventDefault(); 
       }); 
     } 
   }; 
});

for some reason this is affecting dynamically created links in IE7 even
if those links have an href attribute, so I guess the problem lies in
the element.attr('href') code. This can be easily fixed by adding a
check for an ng:click attribute to the if statement.

if (element.attr('href') === '' && element.attr('ng:click')) {

vojtajina · 2011-05-31T12:55:21Z

Should be merged into master soon, thanks a lot for the reporting and suggesting solution as well...

IgorMinar · 2011-05-31T22:39:59Z

This issue turns out to be more complicated that the solution provided by vojta.

Here is a fix that works for all the following cases:

<a href ng:click="foo()">href</a> (link, don't reload)<br>
<a href="" ng:click="foo()">href=""</a> (link, don't reload)<br>
<a ng:href="{{'xx'}}" ng:click="foo()">ng:href</a> (link, reload!)<br>
<a href="" name="xx" ng:click="foo()">empty link+anchor</a> (link, don't reload)<br>
<a name="xxx" ng:click="foo()">anchor</a> (no link)<br>
<a href name="xx" ng:click="foo()">blank link+anchor</a> (no link)

The code:

angularWidget('a', function() {
  this.descend(true);
  this.directives(true);

  return function(element) {
    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('href') === null && !element.attr('name')) {
      element.attr('href', '');
    }

    if (element.attr('href') === '' && !hasNgHref) {
      element.bind('click', function(event){
        event.preventDefault();
      });
    }
  };
});

Note that the code, unifies the the behavior of href without any value across all browsers and also preserves the "don't reload if link empty" behavior that this widget was originally designed for.

Vojta, can you please update your pull request and tests with my code above? thanks!

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 angular#352

vojtajina closed this as completed in 4b0f2df Jun 2, 2011

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ng:href produces unclickable links on IE7 #352

ng:href produces unclickable links on IE7 #352

idosela commented May 25, 2011

xenomonkey commented May 27, 2011

vojtajina commented May 31, 2011

IgorMinar commented May 31, 2011

ng:href produces unclickable links on IE7 #352

ng:href produces unclickable links on IE7 #352

Comments

idosela commented May 25, 2011

xenomonkey commented May 27, 2011

vojtajina commented May 31, 2011

IgorMinar commented May 31, 2011