{{}}がsrc属性で動作しないのはなぜですか？なぜngSrcが必要なのですか？</p> <pre><code><a href="{{myAwesomeLink}}">It's a link. A dynamic one, at that.</a> </code></pre> <p>をしかし、これはしていません：：

Question

これは動作します

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

一つは、代わりにngSrcを使用する必要があります。なぜこれが当てはまるのか分かりますか？私はHandlebars.jsで働くために「src」（または「href」だったのでしょうか？）という似た問題を抱えていて、それをあきらめました。

これは普及しているブラウザの問題なのですか？

Answer 1

は、

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

作品ながら、それはベストプラクティスではありません。アンカータグでデータバインディングを使用するたびに、ng-hrefディレクティブを使用する必要があります。ストレート角度のドキュメントから

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

：だから、アンカータグのコードは次のようになります。ユーザーがクリックした場合、href属性のように角度のマークアップを使用して

は、間違ったURLにページがオープンになり角度の前にそのリンクを実際のURLに置き換える機会があると、リンクが壊れて、おそらく404エラーが返されます。 ngHrefディレクティブはこの問題を解決します。

これは、私たちはNG-SRCを理解するのに役立ちます：

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

とブラウザが画像をロードしようとしますので、しかし角度は、まだSRC内の括弧表現を交換していないので、画像の読み込みに失敗します。

<img ng-src="{{imgPath}}"> 

括弧で囲まれた式が入力されるまでブラウザーに待機させ、正しいイメージをロードするようブラウザに指示しています。

Answer 2

documentation言及のような角度のマークアップを使用して、この

{{}}ハッシュ動作しませんsrc属性で 右：リテラルテキストとURLからフェッチするブラウザ {{ハッシュ} } {{hash}}内の式をAngularが置き換えるまで ngSrcディレクティブはこの問題を解決します。

あなたは慎重に検討した場合、あなたのHTMLにJavaScriptのデータバインディングでは、HTMLの後に起こるDOMがロードされているので、ブラウザは{{url}}としてではなく、有効なURL文字列intial SRCを見て失敗しました。動的に角度を使用してリンクを作成するときに私の上の答えを拡張