ng-srcとsrcの使用

Question 1

このチュートリアルでは、次のngSrc代わりにディレクティブを使用する方法を示しますsrc。

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

彼らは求めます：

ng-srcディレクティブをプレーンな古いsrc属性に置き換えます。
FirebugやChromeのWebインスペクタなどのツールを使用するか、ウェブサーバーのアクセスログを調べて、アプリが実際に/app/%7B%7Bphone.imageUrl%7D%7D（または / app / {{phone .imageUrl}}）。

私はそうしました、そしてそれは私に正しい結果を与えました：

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

理由はありますか？

Question 2

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

これはphone.imageUrl、angularが読み込まれた後に評価され、その値に置き換えられるため、期待どおりの結果が得られます。

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

しかし、これにより、ブラウザはという名前の画像を読み込もうとするため、{{phone.imageUrl}}リクエストが失敗します。これはブラウザのコンソールで確認できます。

Question 3

Angular docsから

それを書くバギーな方法：

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

それを書く正しい方法：

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

どうして？これは、ページのロード時に、角度ブートストラップとコントローラーの作成の前に、ブラウザーが画像をロードしようとしてhttp://www.gravatar.com/avatar/{{hash}}失敗するためです。次に、angularが開始されると、それ{{hash}}をsay logo.pngに置き換える必要があることが理解され、src属性がに変更されhttp://www.gravatar.com/avatar/logo.png、イメージが正しくロードされます。問題は、2つのリクエストが送信され、最初のリクエストが失敗することです。

これを解決するng-srcには、どちらが角度ディレクティブであるかを使用する必要があり、angularは、角度ブートストラップとコントローラーが完全にロードされた後にのみ、ng-src値をsrc属性に置き換えます。{{hash}}

Question 4

これsrc="{{phone.imageUrl}}"は不要であり、ブラウザによる追加のリクエストを作成します。ブラウザは、GETその画像を読み込もうとする少なくとも2つのリクエストを行います。

式が評価される前 {{phone.imageUrl}}
式が評価された後 img/phones/motorola-xoom.0.jpg

ng-srcAngular式を扱うときは、常にディレクティブを使用する必要があります。<img ng-src="{{phone.imageUrl}}">単一のリクエストの期待される結果を提供します。

余談ですが、同じことが当てはまるng-hrefので、最初のダイジェストサイクルが始まるまで、リンクが壊れることはありません。

Question 5

HTMLは順番に処理され、このHTMLページが行ごとに処理されるとき、この画像、行、および画像の処理がphone.imageUrl完了するまでに、まだ定義されていません。

実際、Angular JSはまだこのHTMLチャンクを処理しておらず、これらのプレースホルダーをまだ探していないため、これらの式を値に置き換えていません。つまり、ブラウザがこの行を取得し、このURLでこの画像をフェッチしようとするのです。

そしてもちろん、これは偽のURLであり、まだ口ひげと中かっこが含まれている場合は404になりますが、Angularがこれを処理すると、このURLが適切なURLに置き換えられます。画像はまだ表示されていますが、404エラーメッセージがコンソールに残っています。

では、これをどのように処理できるでしょうか？まあ、通常のHTMLトリックを使用してこれを処理することはできません。しかし、Angularを使用して対処できます。どういうわけか、ブラウザにこのURLをフェッチしないように指示すると同時に、Angularがこれらのプレースホルダの解釈の準備ができているときにのみフェッチする必要があります。

これを行う1つの方法は、標準のHTML属性の代わりにAngular属性をここに配置することです。そして、角度属性はちょうどng-srcです。したがって、ここで戻ると、AngularがこのHTMLを取得してすべての式をその値に変換して初めて画像がフェッチされるため、エラーが発生しなくなっていることがわかります。