为什么某些html元素需要Angular.JS指令,而其他人不需要？

Question

我一直在研究Angular.JS教程,我在第6步.本教程显示以下代码段:

<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>

然后继续解释:

我们还添加了... ngSrc指令.该指令阻止浏览器按字面意思处理角度{{expression}}标记,并启动对无效url /app/ {{phone.imageUrl}}的请求,如果我们只在一个中指定了一个属性绑定,它就会这样做常规的src属性().使用ngSrc指令可防止浏览器向无效位置发出http请求.

所以,它说的是,img元素需要使用特殊的Angular.JS指令ngSrc,以便它可以正确解析双花括号.但他们无法解释为什么a元素不需要相同的特殊指令.

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

这里发生了什么？href可以正确解析双花括号,但src不能？为什么？

Answer 1

AngularJS文档是查找此类信息的好地方.

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

在src属性中使用{{hash}}之类的Angular标记无法正常工作:浏览器将使用文字文本{{hash}}从URL中获取,直到Angular替换{{hash}}中的表达式.ngSrc指令解决了这个问题.

实际上有一个ng-href指令:

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

如果用户在Angular有机会用{{hash}}标记替换其值之前单击它,则在href属性中使用{{hash}}之类的Angular标记将使链接转到错误的URL.在Angular替换标记之前,链接将被破坏,并且很可能会返回404错误.

所以这就意味着如果你写一个这样的网址:

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

但是,如果尚未加载Angular,则URL内的哈希可能会成为问题.如果用户在Angular绑定之前尝试单击该链接,则链接将实际上是{{ phone.id }}实际绑定值而不是实际绑定值.

这种情况多久发生一次？那么这取决于你的页面加载需要多长时间.如果您在不解析路线的情况下将承诺解析到页面上,那么用户肯定有机会点击不正确的链接.

长话短说,不同的指令,同样的推理.