angularjs - 为什么 {{}} 在 src 属性中不起作用？为什么我需要 ngSrc？

Question

这有效:

<a href="{{myAwesomeLink}}">It's a link. A dynamic one, at that.</a>

但这不是:

<img src="{{URLtoMyPerfectImage}}">

需要使用 ngSrc 来代替。我可以知道为什么会这样吗？我在 Handlebars.js 中使用“src”(或者是“href”？我不记得了)时遇到了类似的问题，并放弃了它(交付压力)。

这是一个普遍的浏览器问题还是类似的问题？

Answer 1

将答案延伸到我上面，同时

<a href="{{myAwesomeLink}}">It's a link. A dynamic one, at that.</a>

有效，但使用 Angular 动态创建链接时这不是最佳实践。任何时候在 anchor 标记中使用数据绑定(bind)时，都应该使用 ng-href 指令。因此 anchor 标记的代码应如下所示:

<a ng-href="{{myAwesomeLink}}">It's a link. A dynamic one, at that.</a>

直接来自 Angular 的文档:

Using Angular markup like in an href attribute makes the page open to a wrong URL, if the user clicks that link before angular has a chance to replace the with actual URL, the link will be broken and will most likely return a 404 error. The ngHref directive solves this problem.

这有助于我们理解 ng-src:因此

<img src="{{imgPath}}">

浏览器尝试加载图像，但 Angular 尚未替换 src 中的括号表达式，因此图像加载失败。通过使用

<img ng-src="{{imgPath}}">

您告诉浏览器等待加载图像，直到括号内的表达式被填充，从而加载正确的图像。