式のAngular Lazyワンタイムバインディング


93

AngularJSには、バージョン1.3.0-beta.10以降の新機能、「レイジーワンタイムバインディング」があります。

単純な式の前にを付けて::、式が最初に評価された後に角度を停止するように角度を指定できます。与えられた一般的な例は次のようなものです:

<div>{{::user.name}}</div>

次のような式の同様の構文はありますか?

<div ng-if="user.isSomething && user.isSomethingElse"></div>
<div ng-class="{classNameFoo: user.isSomething}"></div>

詳細な説明については、角度のドキュメントを参照してください:docs.angularjs.org/guide/expression#one-time-binding
Akshay Gundewar 2017

回答:


160

はい。あなたがすべての式を前に付けることができ::、中にさえものngIfかをngClass

<div ng-if="::(user.isSomething && user.isSomethingElse)"></div>
<div ng-class="::{classNameFoo: user.isSomething}"></div>

実際、コードは、式の最初の2つの文字が:1回限りのバインディングをアクティブにするためのものであることを確認するだけです(その後、それらを削除するため、括弧は不要です)。他はすべて同じままです。


3
:新機能のいくつかは、うまく動作しませんが、それは、私の質問に答える<div ng-if="::user.isSomething"></div><div ng-if="::(!user.isSomething)"></div>、レンダリングの両方。「::」がなくても機能します。
2014年

@seldary問題を再現できません。::私の編集で説明されているように、接頭辞が付いたすべての式がうまく機能します。疑わしい場合は、フィドルを作成できますか?
ブラックホール2014年

7
最初は、複数のクラスが定義されているngClassで、私にとっても機能しないように見えました。ngClassで使用される監視対象の変数の一部がまだ定義されていないため、バインディングがまだバインドされていることがすぐにわかりました(angularは、値が定義されるのを待ってからウォッチャーを解放することがわかっています)。次に、この動作jsfiddle.net/2LkyLoopを示す小さなフィドルを示します。
Denis Pshenov、2015年

1
@MaxRocket bindonce構文は、angular 1.3で追加されました。したがって、1.2以下
Berty

2
ng-ifの1回限りのバインディングが機能していないようです。ウォッチャーの数は、の有無にかかわらず非常に多くなってい::ます。ng-classではうまく機能しますが、ng-ifは私にとって1回限りのバインディングに従っていないようです(1.5.6)。ng-repeatからのオブジェクトプロパティを一方向にバインドしようとしていることに注意してください。それが違いを生むかどうかはわかりません。
AgmLauncher 2016年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.