角度の異なるディレクティブの異なる動作に対する混乱

Question

異なるディレクティブの異なる動作の間で混乱します。以下のコードng-repeatでは文字列を受け取るだけですが、ng-sourceにはimageが必要です。誰か説明できますか？

<ul> 
     <li ng-repeat = "image in product.images" > 
       <img ng-src="{{image}}" /> 
     </li> 
</ul> 

以上を明確にする： のようなng-repeatための構文ではありません理由：

角度で解決されていることは確かAngularJSディレクティブと痛みのポイントの一つだng-repeat = "{{image in product.images}}"

Answer 1

、2+ ：ディレクティブが何を期待しているかを知るためには、ディレクティブのドキュメント（またはその文書のソースコード）を慎重に読む必要があります。

通常、渡す値が文字列（画像URLやリンクhrefなど）の場合、ディレクティブは式を渡すことを期待しません。たとえば、静的な文字列を直接渡すことができます、ng-src="/images/foo.png"。また、スコープ変数の値のように値を動的にする場合は、補間を使用します。ng-src="{{ imagePath }}"。

ディレクティブは、文字列以外の値（ブール値、オブジェクト、またはng-repeatやng-optionsで使用されるような特定のマイクロシンタックスなど）を期待する場合、またはディレクティブが値渡すのは常に動的なので、補間は使用せず、式は常に動的です。その場合、リテラル文字列をこのようにして渡す必要があることに注意してください：foo="'static string'"。

しかし、それは常に指示の設計で行われた選択に沸いてしまい、その文書を読む必要があります。

Answer 2

これはすべて動的な動作です。 ng-repeatを使用している場合は、あらかじめ定義されているコレクションを反復処理しています。それについてダイナミックなものはありません。変数自体の値は動的でもかまいませんが、同じ変数（または[1,2,3,4]のようなインライン配列）を繰り返し処理することが保証されます。

ただし、ng-srcを使用している場合は、その画像の動的パスを渡しています。 Angularは{{image}}の値を解決するときにsrc属性を追加します。

ng-includeの引数を渡す方法を確認してください。 <div ng-include="template.url"></div>。ここでtemplate.urlはではありません。 srcにあると予想される実際のパスはありません。むしろ変数を使用しています。正確なパスを渡す場合は、正確なパスを文字列として'に含めます。例：

<div class="slide-animate" ng-include="template_path+'template1.html'"></div>。

文字列を表す一重引用符で囲まれた'template1.html'に注目してください。ここで、template_pathは変数です。