2016-02-11 5 views
11

で:使用する二重括弧{{}}角度ドキュメントから撮影angularJS

Angular Expressions
角度表現は、補間バインディングに配置され、主に であるJavaScriptのようなコードスニペットは、等

<span title="{{ attrBinding> }}">{{ textBinding }}</span> 

だけでなく、0123などのディレクティブ 属性で直接使用。私が使用する必要がある場合の少し混乱しているが

1 + 2 A + B user.nameアイテム[インデックス]

例えば、これらは角度で有効な式です二重括弧の構文{{}}とそうでない場合。ドキュメンテーションは、ディレクティブアトリビュート内で式を使用するときにそれらを必要としないことを示唆しているようです(上記のng-clickの例を参照してください)。

作品次のコードは、これに反する事例証拠提供していますが:

<ul id="Menu"> 
     <li ng-repeat="appModule in applicationModules" id="{{appModule.Name}}" ng-class="{ 'selected' : selectedAppModule == '{{appModule.Name}}' }" ng-click="menuClicked(appModule.Name)"> 
      <a href="#Content/{{appModule.Name}}">{{appModule.Display}}</a> 
     </li> 
    </ul> 

注NGクラスのディレクティブで、二重括弧の使用方法をし、NG-クリックディレクティブの内側に、彼らはありません。

いつ使用するのか、そうでないのはわかりますか?

+1

値を取得する場合は中カッコを使用し、変数として使用する場合は中カッコを使用しないでください – MayK

答えて

9

これは、問題のディレクティブ属性とそれが使用するバインディングのタイプによって異なります。さらにそれは、あなたが与えられた状況で意図しているものによって決まります。あなたの例から

ng-repeat="appModule in applicationModules" 

この表現はNGリピートディレクティブ内の角度によって評価されるようブレースの必要はありません。私たちは、idは式の値に等しくなるようにしたいと


id="{{appModule.Name}}" 

は、ここでは、括弧を必要としています。


ng-class="{ 'selected' : selectedAppModule == '{{appModule.Name}}' }" 

私は、これはのように記述することができるかなり確信している:

ng-class="{ 'selected' : selectedAppModule == appModule.Name }" 

そして、あなたは同じ動作を取得。この例では

ng-click="menuClicked(appModule.Name)" 


は、私たちが必要とするmenuClickedという名前のメソッドにバインドするためにNGをクリックします。


は、一般的に我々が使用{{}}私たちが式を評価したいと属性を扱うときに、我々は常に使用する必要がないとき{{}}彼らは舞台裏に評価多くの場合も同様です。

シンプルヒント {{}}が必要な場合の経験則は、.ToString()の方法のラッパーとして考えることです。式を文字列に変換するのは意味がありますが、{{}}も使用します。 (すべてのカウンターの例は大歓迎です)

+0

詳細な回答ありがとうございます。あなたはリテラル値の代わりに変数を使って動作するng-classについても正しくありました。 –

関連する問題