angularjs – 使用ng-src vs src

前端之家收集整理的这篇文章主要介绍了angularjs – 使用ng-src vs src前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_301_0@ 这个 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>

有什么原因吗?

<img ng-src="{{phone.imageUrl}}">

这给出了预期的结果,因为phone.imageUrl被评估并且在加载angular之后被其值替换。

<img src="{{phone.imageUrl}}">

但是,这样,浏览器尝试加载名为{{phone.imageUrl}}的图像,这会导致请求失败。您可以在浏览器的控制台中进行检查。

猜你在找的Angularjs相关文章