Question

我一直在研究Angular.JS教程，我在step 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标记不起作用右：浏览器将使用文字文本从URL中获取 {{hash}}直到Angular替换{{hash}}中的表达式。该 ngSrc指令解决了这个问题。

实际上有ng-href指令：

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

在href属性中使用像{{hash}}这样的Angular标记将会成为如果用户在Angular拥有之前单击它，则链接将转到错误的URL 有机会用它的值替换{{hash}}标记。直到Angular 替换标记链接将被破坏并且很可能返回404错误。

基本上这就是说，如果你写这样的网址：

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

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

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

长话短说，不同的指示，同样的推理。

Answer 2

为了添加David的好答案，基本的区别在于href不会在页面加载时触发任何服务器调用（因为没有理由，只有在你按照链接时才会触发），而在另一个上当页面加载时，所有图像标签都被加载，当然，服务器会尝试立即获取它们，因为它们的路径位于src属性中。

问题是DOM在角度加载之前很多（因为DOM启动角度），所以在角度加载之前没有解析/插值，但是所有的图像标签都准备就绪，系统开始提取它们。此时，您的图片来源为{{phone.imageUrl}}，它会先尝试获取该图片，然后返回错误。

ng-src避免了这种默认行为，并在角度准备就绪后将src添加到图像中。

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

2 个答案: