angularjs - ng-src 与 src 的使用

Question

这个tutorial演示如何使用指令 ngSrc 而不是 src :

<ul class="phones">
    <li ng-repeat="phone in phones" class="thumbnail">
        <img ng-src="{{phone.imageUrl}}">
    </li>
</ul>

他们要求:

Replace the ng-src directive with a plain old src attribute.
Using tools such as Firebug, or Chrome's Web Inspector, or inspecting the webserver access logs, confirm that the app is indeed making an extraneous request to /app/%7B%7Bphone.imageUrl%7D%7D (or /app/{{phone.imageUrl}}).

我这样做了，它给了我正确的结果:

<li class="thumbnail ng-scope" ng-repeat="phone in phones">
    <img src="img/phones/motorola-xoom.0.jpg">
</li>

有什么理由吗？

Answer 1

来自 Angular 文档

错误的编写方式:

<img src="http://www.gravatar.com/avatar/{{hash}}"/>

正确的写法:

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

为什么？这是因为在加载页面时，在 Angular 引导和创建 Controller 之前，浏览器将尝试从 http://www.gravatar.com/avatar/{{hash}} 加载图像，并且它将失败。然后，一旦 Angular 启动，它就会明白 {{hash}} 必须替换为 logo.png，现在 src 属性更改为 http:///www.gravatar.com/avatar/logo.png 并且图像正确加载。问题是有 2 个请求正在进行，第一个请求失败。

要解决这个问题，我们应该使用 ng-src，它是一个 Angular 指令，Angular 只会在之后将 ng-src 值替换为 src 属性> Angular 引导和 Controller 已完全加载，此时 {{hash}} 已被替换为正确的范围值。