AngularJS：AngularJSでは、ng-bindが{{}}より優れているのはなぜですか？

私は角張ったプレゼンテーションの1つにいて、言及された会議の1人は拘束力ng-bindより優れてい{{}}ます。

理由の1つは、ng-bind変数をウォッチリストに配置し、モデルの変更がある場合にのみ、データがプッシュされて表示される一方で、{{}}毎回式を補間して（角度サイクルだと思います）、値が変更されたかどうかにかかわらず、値。

また、画面上にデータがあまりない場合でも使用でき{{}}、パフォーマンスの問題が見えなくなるとも言われています。誰かがこの問題についていくつかの光を当てることができますか？

を使用していない場合はng-bind、代わりに次のようにします。

<div>
  Hello, {{user.name}}
</div>

解決される前（データがロードされるHello, {{user.name}}前user.name）の1秒間の実際が表示される場合があります。

あなたはこのようなことをすることができます

<div>
  Hello, <span ng-bind="user.name"></span>
</div>

それがあなたにとって問題であるなら。

別の解決策はを使用することng-cloakです。

可視性：

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サービスのドキュメント

更新28.11.2014（ただし、トピックから外れている可能性があります）：

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行ごとに複数のバインディングを持つテーブル内のデータを出力します。翻訳バインディング、フィルター出力、すべてのスコープダイジェストで実行されます。

ng-bind よりも良い {{...}}

たとえば、次のようにできます。

<div>
  Hello, {{variable}}
</div>

つまり、でHello, {{variable}}囲まれたテキスト全体<div>がコピーされ、メモリに保存されます。

代わりに次のようなことをすると：

<div>
  Hello, <span ng-bind="variable"></span>
</div>

値の値のみがメモリに保存され、angularは変数のみで構成されるウォッチャー（ウォッチ式）を登録します。

基本的に、ダブルカーリー構文はより自然に読みやすく、入力の手間が少なくなります。

どちらの場合も同じ出力が生成されますが、これを選択した場合、テンプレートが角度でレンダリングされる前に、{{}}数ミリ秒間ユーザーに表示される可能性があります{{}}。そのため、何かに気づいたら{{}}、使用する方が良いでしょうng-bind。

また、非常に重要なのは、レンダリングされていないを使用できるのは、角度アプリのindex.htmlでのみであることです{{}}。ディレクティブを使用してテンプレートを使用している場合は、angularが最初にテンプレートをレンダリングし、それをDOMに追加するため、それが表示される可能性はありません。

{{...}}双方向のデータバインディングを意味します。ただし、ng-bindは実際には一方向のデータバインディング用です。

ng-bindを使用すると、ページ内のウォッチャーの数が減ります。したがって、ng-bindはよりも高速になり{{...}}ます。したがって、値とその更新を表示するだけで、UIからコントローラーへの変更を反映したくない場合は、ng-bindを使用します。これにより、ページのパフォーマンスが向上し、ページの読み込み時間が短縮されます。

<div>
  Hello, <span ng-bind="variable"></span>
</div>

これは{{}}、2つの{{}}ノードがマージされる可能性があるため、角度コンパイラーはテキストノードとその親の両方を考慮するためです。したがって、ロード時間を増やす追加のリンカーがあります。もちろん、そのようないくつかの発生については違いは重要ではありませんが、多数のアイテムのリピーター内でこれを使用すると、より遅いランタイム環境に影響を及ぼします。

Ng-Bindが優れている理由は、

ページが読み込まれていない場合、インターネットが遅い場合、またはウェブサイトが半分読み込まれている場合、これらのタイプの問題（スクリーンショットと読み取りマークを確認）が完全に奇妙な画面でトリガーされることがわかります。そのようなことを避けるために、NGバインドを使用する必要があります

ng-bindにも問題があります。角度フィルター、制限などを使用しようとすると、ng-bindを使用すると問題が発生する可能性があります。しかし、それ以外の場合、UXサイドではng-bindの方が優れています。ユーザーがページを開くと、シンボル（{{...}}）を印刷する（10ms-100ms）が表示されるため、ng-bindの方が優れています。 。

{{}}にちらつきの問題があり、ページを更新すると、短い時間のスパムが表示されます。したがって、データの表現には、式の代わりにng-bindを使用する必要があります。

ng-bindhtml文字列として表されるため、安全です。

したがって、たとえば、'<script on*=maliciousCode()></script>'文字列として表示され、実行されません。

アンギュラドキュメントによると：
のでngBindは、要素の属性があり、それはページの読み込み中にユーザーへのバインディングは見えなくなります...それが主な違いです...

基本的に、すべてのdom要素が読み込まれなくなるまで、それらを見ることができません。ngBindは要素の属性であるため、domが動作するまで待機します... 以下の詳細

ngBind-
モジュールng

のディレクティブngBind属性は、AngularJSに指定されたHTML要素のテキストコンテンツを特定の式の値で置き換え、その式の値が変更されたときにテキストコンテンツを更新するように指示します。

通常、直接ngBindを使用するのではなく、代わりに{{expression}}のような二重のカーリーマークアップを使用します。

AngularJSがテンプレートをコンパイルする前にテンプレートが未加工の状態でブラウザーによって一時的に表示される場合は、{{expression}}ではなくngBindを使用することをお勧めします。ngBindは要素の属性であるため、ページの読み込み中はユーザーにバインディングを非表示にします。

この問題の代替ソリューションは、ngCloakディレクティブを使用することです。こちらをご覧ください

ngbindの詳細については、次のページにアクセスしてください。https：//docs.angularjs.org/api/ng/directive/ngBind

あなたは属性としてng-bindとしてこのようなことをすることができます：

<div ng-bind="my.name"></div>

または以下のように補間を行います：

<div>{{my.name}}</div>

またはこのようにAngularJsのng-cloak属性で：

<div id="my-name" ng-cloak>{{my.name}}</div>

ng-cloakは、domのフラッシュを避け、すべての準備ができるまで待ちます！これはng-bind属性と同じです...

このサイトを参照すると、ng-bindよりも遅い{{}}であることがわかっているので、どちらが良いかを説明します。

http://corpus.hubwiz.com/2/angularjs/16125872.html このサイトを参照してください。