href中的角度绑定有效但src绑定不起作用吗？

Question

我是Angular的新手，我正试图通过他们自己网站上的教程来了解它。

Link to the step I am currently on

现在我从这一特定步骤中理解的是，我可以使用href="#/phones/{{phone.id}}"并且Angular会在处理时绑定{{phone.id}}，但为了绑定src属性，它需要ng-src 1}}属性或其他方式浏览器将按字面处理{{ expression }}标记。

为什么src不适用于Angular绑定而href不起作用？为什么我们不需要ng-href或类似的东西来使它工作？

Answer 1

因为浏览器在呈现html页面时尝试从src属性下载图像。因此，当页面第一次呈现时，浏览器将解析表达式作为图像源，并返回404。

angualr使用ng-src做的是解析图像路径并在评估表达式后更新src属性。

但是如果锚中有href，它只是字符串解析，浏览器不必下载任何东西。在评估表达式并且浏览器将获得更改后，href属性将更新。

希望有意义。

Answer 2

  

在href属性中使用像{{phone.id}}这样的Angular标记会生成   如果用户在Angular拥有之前单击它，则链接将转到错误的URL   有机会用{{phone.id}}标记替换其值。直到Angular   替换标记链接将被破坏并且很可能   返回404错误。

ngHref指令解决了这个问题。

写错的方法：

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

写它的正确方法：

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

直接来自AngularJS docs https://docs.angularjs.org/api/ng/directive/ngHref

在您的示例中，img src必须使用ng-src，因为图片会在页面开始加载时自动加载，而角色也没有机会替换它。

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

Answer 3

来自ngSrc doc：

  

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

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

但src没有等待任何东西，浏览器在渲染时获取src并抛出异常。