AngularJS のディレクティブスコープにおける '@' と '=' の違いは何ですか? 質問する

Question

「{{title}}」を「 @」で、「title」を「= 」で使用しなければならないのはなぜですか?

@ は、ローカル/ディレクティブスコーププロパティをDOM 属性の評価値にバインドします。title=title1またはを使用する場合title="title1"、DOM 属性 "title" の値は単に文字列になりますtitle1。を使用する場合title="{{title}}"、DOM 属性 "title" の値はの補間値であるため、文字列は親スコーププロパティ "title" に現在設定されているものになります。属性値は常に文字列であるため、 @ を{{title}}使用すると、ディレクティブのスコープ内でこのプロパティの値が常に文字列になります。

=は、ローカル/ディレクティブスコーププロパティを親スコーププロパティにバインドします。したがって、=では、親モデル/スコーププロパティ名を DOM 属性の値として使用します。={{}}では s は使用できません。

@ を使用すると、次のようなことができます-- {{title}} が挿入され、文字列 "and them some" がそれに連結されます。最終的な連結された文字列が、ローカル/ディレクティブスコーププロパティによって取得されます。(これは=title="{{title}} and then some"では実行できず、@のみで実行できます。)

@では、attr.$observe('title', function(value) { ... })リンク関数で値を使用する必要がある場合にを使用する必要があります。たとえば、if(scope.title == "...")期待どおりには動作しません。これは、この属性にのみアクセスできることを意味します。非同期的に. テンプレート内でのみ値を使用する場合は、$observe() を使用する必要はありません。例: template: '<div>{{title}}</div>'.

= を使用する場合、 $observe を使用する必要はありません。

要素を属性で装飾せずに、親スコープに直接アクセスすることもできますか?

はい、ただしisolateスコープを使用しない場合に限ります。ディレクティブからこの行を削除してください

scope: { ... }

すると、ディレクティブは新しいスコープを作成しません。親スコープを使用します。その後、親スコープのすべてのプロパティに直接アクセスできます。

ドキュメントには、「多くの場合、分離スコープから式を介して親スコープにデータを渡すことが望ましい」と書かれていますが、双方向バインディングでも問題なく機能するようです。なぜ式ルートのほうが優れているのでしょうか?

はい、双方向バインディングにより、ローカル/ディレクティブスコープと親スコープでデータを共有できます。「式バインディング」により、ディレクティブは DOM 属性で定義された式 (または関数) を呼び出すことができます。また、式または関数にデータを引数として渡すこともできます。したがって、親とデータを共有する必要がなく、親スコープで定義された関数を呼び出すだけの場合は、&構文を使用できます。

参照

Lukas の分離スコープのブログ投稿(@、=、& をカバー)
dnc253 の説明@ と = の
私のブログのような答えスコープについて -ディレクティブセクション（一番下、要約セクションの直前）には、分離スコープとその親スコープの図があります - ディレクティブスコープでは、1つのプロパティに@を使用し、別のプロパティに=を使用します
AngularJS における & と @ および = の違いは何ですか?

Answer 1