web-dev-qa-db-ja.com

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

私は角度のあるプレゼンテーションのうちの1人にいました、そしてng-bindが{{}}バインディングより優れていると述べた会議の中の1人の人。

その理由の1つは、ng-bindがウォッチリストに変数を追加し、モデルの変更があった場合にのみデータが表示にプッシュされることです。一方、{{}}は毎回式を補間します（角度サイクルです）。値が変わっても変わらなくても値をプッシュします。

また、画面に表示されるデータがそれほど多くない場合は{{}}を使用できますが、パフォーマンスの問題は見えなくなります。誰かが私のためにこの問題に光を当てることができますか？

javascriptangularjsng-bind
393
Nair

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

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

Hello, {{user.name}}が解決される前（データがロードされる前）に実際のuser.nameが一瞬表示されることがあります。

こんなことができる

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

それがあなたのための問題なら。

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

320
holographic-principle

可視性：

あなたのangularjsがブートストラップしている間、ユーザはhtmlの中にあなたの置かれた括弧を見るかもしれません。これはng-cloakで扱うことができます。しかし、私にとってng-bindを使用すれば、これは回避策です。使用する必要はありません。

パフォーマンス：

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

このng-bindはdirectiveであり、渡された変数にウォッチャーを置きます。そのため、渡された値が実際にはを変更した場合）にのみng-bindが適用されます。

一方、角かっこはダーティーチェックになり、every$digest、たとえ必要ではない）でも更新されます。

私は現在、大きな単一ページのアプリを作成しています（1ビューにつき〜500バインディング）。 {{}}から厳密なng-bindに変更すると、すべてのscope.$digestで約20％節約できました。

提案：

angular-translateのような翻訳モジュールを使用する場合は、角括弧の注釈の前に常にdirectivesを選択してください。

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

あなたがフィルタ関数を必要とするならば、もっと良いディレクティブを選んでください。 $ filter serviceのドキュメント

UPDATE 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。翻訳バインディング、フィルタ出力、すべてのスコープダイジェストで実行されます。

539
Konstantin Krass

ng-bindは{{...}}より優れています

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

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

これは、Hello, {{variable}}で囲まれたテキスト<div>がコピーされ、メモリに保存されることを意味します。

代わりにあなたがこのような何かをするならば：

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

その値の値だけがメモリに格納され、Angularは変数のみからなるウォッチャー（ウォッチ式）を登録します。

29
J brian

基本的には、二重巻きの構文はより自然に読みやすく、入力が少なくて済みます。

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

また、非常に重要なのは、Angularアプリのindex.htmlにのみ、レンダリングされていない{{}}を含めることができるということです。もしテンプレートでディレクティブを使用しているのであれば、まずAngularがテンプレートをレンダリングし、それをDOMに追加した後にそれを見ることはできません。

15
hellopath

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

4
Ambika Sukla

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

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

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

enter image description here

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

あなたのページが読み込まれていないとき、またはあなたのインターネットが遅いとき、またはあなたのウェブサイトが半分読み込まれたとき、あなたは問題のこれらのタイプを見ることができます （読み取りマークでスクリーンショットを確認してください） 完全に奇妙な画面上で起動されます。これを避けるためにはNg-bindを使うべきです

2
Vikas Kalapur

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

1
GAURAV ROY

ng-bindにも問題があります。angular filters、limitなどを使用しようとすると、 ng-bindを使用すると問題が発生する可能性があります。しかし、他の場合、ng-bindはUX sideの方が優れています。ユーザーがページを開くと、シンボルを印刷する（10ms-100ms）が表示されます（ {{...}}）、そのためng-bindの方が優れています。

1
Hazarapet Tunanyan

Angular Docによると：
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 attribute ...と同じです。

0
Alireza

このサイトを参照すると、{{}}を知っているのでこれがng-bindより遅いという説明が得られます。

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

0
Sneha

ng-bindはhtmlを文字列として表しているので、より安全です。

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

0
raneshu