Why do certain html elements need Angular.JS directives, and others don't?

Question

I've been working through the Angular.JS tutorial, and I'm on step 6. The tutorial shows the following code snippet:

<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
    <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
    <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
    <p>{{phone.snippet}}</p>
  </li>
</ul>

It then goes on to explain:

We also added ... the ngSrc directive. That directive prevents the browser from treating the angular {{ expression }} markup literally, and initiating a request to invalid url /app/{{phone.imageUrl}}, which it would have done if we had only specified an attribute binding in a regular src attribute (). Using the ngSrc directive prevents the browser from making an http request to an invalid location.

So, what it's saying is, the img element needs to use the special Angular.JS directive ngSrc so it can correctly parse the double curly braces. But they fail to explain why the a element doesn't require the same special directive.

<a href="#/phones/{{phone.id}}">

What's going on here? href can correctly parse the double curly braces, but src can't? Why?

Answer 1

The AngularJS docs are great place to find this type of information.

http://docs.angularjs.org/api/ng/directive/ngSrc

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

There is actually a ng-href directive:

http://docs.angularjs.org/api/ng/directive/ngHref

Using Angular markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the {{hash}} markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error.

So essentially what this all means is that if you write a url like this:

<a href="#/phones/{{ phone.id }}">

However, the hashes inside the URL can be an issue if Angular hasn't loaded yet. If the user attempts to click that link before Angular binds the link will literally be the {{ phone.id }} rather than the actual bound value.

How often, does this happen? Well it depends on how long it takes your page to load. If you're resolving a promise onto the page without resolving the route then the user will definitely have a chance to click the improper link.

Long story short, different directives, same reasoning.