为什么{{}}不能在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

documentation提到这个

  

在src属性中使用{{hash}}之类的Angular标记不起作用   右：浏览器将使用文字文本从URL中获取   {{hash}}直到Angular替换{{hash}}中的表达式。该   ngSrc指令解决了这个问题。

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