Angular绑定在href中有效，但在src中无效？

Question

我刚接触Angular，并尝试通过他们官网的教程学习。

这是我正在学习的步骤链接

据我所理解，我可以使用href="#/phones/{{phone.id}}"，Angular处理时会绑定{{phone.id}}，但为了绑定src属性，需要使用ng-src属性，否则浏览器将逐字处理{{ expression }}标记。

为什么src不能与Angular绑定，而href可以呢？为什么我们不需要像ng-href这样的东西来使它生效呢？

- Rohan

Answer 1

因为浏览器在渲染html页面时会尝试从“src”属性下载图片。因此，当页面首次渲染时，浏览器将解析表达式作为图片源，并返回404错误。

Angular使用“ng-src”解析图像路径并在表达式求值后更新“src”属性。

但是，在锚点内部的“href”情况下，它只是字符串解析，浏览器不必下载任何内容。“href”属性将在表达式求值后更新，浏览器将获得更改。

- Muhammad Reda

Answer 2

如果在 href 属性中使用类似 {{phone.id}} 的 Angular 标记，如果用户在 Angular 替换 {{phone.id}} 标记之前单击该链接，则链接将指向错误的 URL。 在 Angular 替换标记之前，该链接将无效，并且很可能返回 404 错误。

ngHref 指令解决了这个问题。

错误的写法：

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

写作的正确方式：

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

这是直接从AngularJS文档中提取的内容 https://docs.angularjs.org/api/ng/directive/ngHref 在你的示例中，img src必须使用ng-src，因为图像会尽快自动加载页面并且angular没有机会替换它。

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

- Jaanus

Answer 3

来自ngSrc文档：

在href属性中使用类似{{hash}}的Angular标记，如果用户在Angular有机会将{{hash}}标记替换为其值之前单击链接，则链接将转到错误的URL。

实际上，使用 href 是不安全的方法。

但是src不等待任何内容，浏览器在渲染时获取src并抛出异常。

- Zaitcev Yurii