Why do some html elements need Angular.JS directives, while others do not?

Question

I was working on an Angular.JS tutorial and I am in step 6 . This lesson 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>

The following is explained:

We also added ... the ngSrc directive. This directive prohibits the browser from taking the angular {{expression}} markup literally and initiating a request for an invalid url / app / {{phone.imageUrl}}, which it would execute if we only specified the attribute binding in the regular src () attribute. Using the ngSrc directive prevents the browser from making an HTTP request to an invalid location.

So, what he says is that the img element should use the Angular.JS ngSrc special directive so that it can parse the double curly braces correctly. But they cannot explain why element a does not require the same special directive.

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

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

Answer 1

AngularJS docs are a great place to look for this type of information.

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

Angular {{hash}} src right: URL {{hash}} Angular {{hash}}. ngSrc .

ng-href:

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

Angular , {{hash}} href, URL-, , Angular {{hash}} . Angular , , , 404.

, , , URL-:

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

URL- , Angular . Angular, {{ phone.id }}, .

? , , . , .

, , .

Answer 2

, , href ( , , ), , , , , , , src.

, DOM , angular ( DOM angular), angular /, . {{phone.imageUrl}}, , .

ng-src src angular.