AngularJS: Angular では ng-bind が {{}} よりも優れているのはなぜですか? 質問する

Question

可視性:

AngularJS がブートストラップしている間、ユーザーは HTML 内に配置された括弧を見ることがあります。これはで処理できますng-cloak。ただし、私にとってこれは回避策であり、を使用する場合は使用する必要はありませんng-bind。

パフォーマンス：

ははるかに遅い{{}}です。

これはディレクティブng-bindであり、渡された変数にウォッチャーを配置します。したがって、渡された値が実際に変更された場合にのみ適用されます。ng-bind

一方、括弧は、必要がない場合でも、毎回ダーティチェックされ、更新されます。 $digest

現在、大きなシングルページアプリ (ビューごとに約 500 バインディング) を構築しています。 {{}} から strict に変更すると、ng-bindすべての点で約 20% の節約になりましたscope.$digest。

提案：

angular-translateなどの翻訳モジュールを使用する場合は、常に括弧注釈の前にディレクティブを優先してください。

{{'WELCOME'|translate}}=><span ng-translate="WELCOME"></span>

フィルター機能が必要な場合は、実際にカスタムフィルターを使用するディレクティブを使用することをお勧めします。$filter サービスのドキュメント

2014 年 11 月 28 日更新(ただし、話題から外れるかもしれません):

Angular 1.3x でこのbindonce機能が導入されました。したがって、式/属性の値を 1 回バインドできます (!= 'undefined' の場合にバインドされます)。

これは、バインディングが変更されるとは予想されない場合に便利です。

使用法:::バインディングの前に配置します。

<ul>  
  <li ng-repeat="item in ::items">{{item}}</li>
</ul>  
<a-directive name="::item">
<span data-ng-bind="::value"></span>

例：

ng-repeat行ごとに複数のバインディングを使用して、テーブルにいくつかのデータを出力します。変換バインディング、フィルター出力は、すべてのスコープダイジェストで実行されます。

Answer 1