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

Question

这有效：

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

但这不会：

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

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

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

Answer 1

在我上面扩展答案，同时

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

有效，但使用 Angular 动态创建链接时，这不是最佳实践。任何时候在锚标记中使用数据绑定时，都应该使用 ng-href 指令。所以锚标记的代码应该是这样的：

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

直接来自 Angular 的文档：

在 href 属性中使用 Angular 标记会使页面打开到错误的 URL，如果用户在 Angular 有机会将其替换为实际 URL 之前单击该链接，则该链接将被破坏并且很可能会返回 404 错误。ngHref 指令解决了这个问题。

这有助于我们理解 ng-src：

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

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

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

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

Answer 2

文档提到了这一点

在 src 属性中使用像 {{hash}} 这样的 Angular 标记不能正常工作：浏览器将从带有文本 {{hash}} 的 URL 获取，直到 Angular 替换 {{hash}} 中的表达式。ngSrc 指令解决了这个问题。

如果您仔细考虑，与您的 html 的 javascript 数据绑定发生在加载 html DOM 之后，因此浏览器将初始 src 视为{{url}}有效的 url 字符串并失败。