angularjs – 为什么{{}}不能在src属性中工作？为什么我需要ngSr

发布时间：2020-12-17 09:03:54 所属栏目：安全来源：网络整理

导读：这有效： a href="{{myAwesomeLink}}"It's a link. A dynamic one,at that./a 但这不是： img src="{{URLtoMyPerfectImage}}" 一个人需要使用ngSrc.我可以知道为什么会这样吗？我有一个类似的问题得到’src'(或者是’href’？我不记得了)在Handlebars.js工作

这有效：

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

但这不是：

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

一个人需要使用ngSrc.我可以知道为什么会这样吗？我有一个类似的问题得到’src'(或者是’href’？我不记得了)在Handlebars.js工作并放弃它(交付的压力).

这是一个普遍的浏览器问题或类似的东西？

同时将答案扩展到我之上

<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的文档：

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}}">

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!