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

Question

我一直在学习 Angular.JS 教程，我正在使用 step 6。本教程展示如下代码sn-p：

<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

为了补充大卫的好答案，基本区别在于 href 不会在页面加载时触发任何服务器调用（因为没有理由，它仅在您点击链接时触发），而另一方面手，页面加载时会加载所有图像标签，当然，服务器会尝试立即获取它们，因为它们的路径在 src 属性中找到。

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

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

Answer 2

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}} 标记。直到角 替换链接将被破坏的标记，并且很可能 返回 404 错误。

所以基本上这一切的意思是，如果你写一个这样的网址：

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

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

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

长话短说，不同的指令，相同的推理。