ngHref prematurely adds href attribute when string is included as part of the expression

[briangershon]

The ngHref doc page gives an example of the correct way of using ngHref to avoid broken URLs until {{hash}} is evaluated.

<a ng-href="http://www.gravatar.com/avatar/{{hash}}"/>

I've created a plunker that demonstrates that this generates the href attribute right away, prior to the {{hash}} evaluating, so the full url is not yet valid.

My understanding is that we should not see either link until {{hash}} is filled in (via the input box), but in the first link example in this plunker we do see an active link:

http://plnkr.co/EOWiCm

I traced through and it seems that the $observe() call is placed on the whole ngHref value and not just the {{hash}}.

Seeing this happen in Angular 1.2.9 through 1.3.0-beta.4 (which the Plunker example is using). Reproduced in Chrome and Safari.

I wasn't able to find a similar bug report.

Potential fix:

The fix might be parsing the ngHref attribute and just observing when the {{hash}} changes and not the string around it. Here was the snippet that was adding the observers in booleanAttrs.js.

        attr.$observe(normalized, function(value) {
          if (!value)
             return;

          attr.$set(name, value);

          // <removed note about IE>

        });

[btford]

This is a known issue; I actually just wrote about it here: http://briantford.com/blog/angular-hacking-core.html

[briangershon]

Thanks @btford for triaging, I'll check out your blog article.

[btford]

There's a significant pending change to $parse, but I'll work on it after that's in.

[btford]

@nicoabie thanks, but it's better to leave feedback on my post on the repo for my blog rather than here.

This thread is for discussing a solution.

[briangershon]

Thanks @btford for your work on this!