我是Angular的新手,我正在尝试通过他们自己网站上的教程来了解它。
链接到我当前正在执行的步骤
现在我从这个特定步骤中了解到的是,我可以用户href="#/phones/{{phone.id}}"
,Angular 将在处理时绑定{{phone.id}}
,但为了绑定src
属性,它需要 ng-src
属性,否则浏览器将按字面处理{{ expression }}
标记。
为什么src
不能与 Angular 绑定一起使用,而href
可以?为什么我们不需要ng-href
或类似的东西来让它工作?
因为浏览器在呈现 html 页面时会尝试从 src
属性下载图像。因此,当页面首次呈现时,浏览器会将表达式解析为图像源,并返回 404。
Angular 对ng-src
所做的是解析图像路径并在计算表达式后更新src
属性。
但是在锚点内部href
的情况下,它只是字符串解析,浏览器不必下载任何东西。计算表达式后,href
属性将更新,浏览器将获得更改。
在 href 属性中使用像 {{phone.id}} 这样的 Angular 标记将使 链接转到错误的URL,如果用户在Angular之前单击它 有机会将 {{phone.id}} 标记替换为其值。直到角度 替换标记链接将被断开并且很可能会 返回 404 错误。
ngHref指令解决了这个问题。
错误的写法:
<a href="#/phones/{{phone.id}}">Possibly broken phone</a>
正确的写法:
<a ng-href="#/phones/{{phone.id}}">Working phone</a>
这是直接来自AngularJS文档 https://docs.angularjs.org/api/ng/directive/ngHref
在您的示例中,img src 必须使用 ng-src,因为图像是尽快自动加载的,页面开始加载并且 angular 没有机会替换它。
https://docs.angularjs.org/api/ng/directive/ngSrc
来自 ngSrc doc
:在 href 属性中使用像 {{hash}} 这样的 Angular 标记将使 链接转到错误的URL,如果用户在Angular之前单击它 有机会将 {{哈希}} 标记替换为其值。
事实上,使用 href 是不安全的方法。
但是 src不会什么都不等待,浏览器在渲染时会得到 src - 并抛出异常。