[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか？

質問

を読みました。 アンギュラーJS のドキュメントをよく読んでから、ディレクティブをいじくりまわしてみました。以下は フィドル .

そして、関連するスニペットを紹介します。

• より HTML :

  <pane bi-title="title" title="{{title}}">{{text}}</pane>
  
  

• pane ディレクティブから。

  scope: { biTitle: '=', title: '@', bar: '=' },
  
  

わからないことがいくつかあります。

• なぜ "{{title}}" と '@' と "title" と '=' ?
• 要素を属性で装飾することなく、親スコープに直接アクセスすることもできますか？
• ドキュメントには "孤立したスコープから式を経由して親スコープにデータを渡すことが望ましいことがよくあります" しかし、それは双方向バインディングでも問題なく動作するようです。なぜ式のルートの方が良いのでしょうか？

もう一つ、エクスプレッションの解決策を示すフィドルも見つけました。 http://jsfiddle.net/maxisam/QrCXh/

解決方法は？

なぜ、"{{title}}" のように、' @ を、"title" を、' = '?

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

= は、ローカル/ディレクティブのスコーププロパティを 親スコーププロパティ . そのため の場合、親モデル/スコープのプロパティ名を DOM 属性の値として使用します。 を使うことはできません。 {{}} とは = .

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

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

と = を使えば、$observeを使う必要はありません。

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

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

scope: { ... }

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

ドキュメントには、"多くの場合、分離したスコープから式を経由して親スコープにデータを渡すことが望ましい"とありますが、これは双方向バインディングでも問題ないようです。なぜ、式経由の方が良いのでしょうか？

そうです、双方向バインディングはローカル/ディレクティブスコープと親スコープでデータを共有することができます。 "式バインディング"はディレクティブがDOM属性によって定義された式（または関数）を呼び出すことができ、式や関数に引数としてデータを渡すこともできます。 ですから、親とデータを共有する必要がなく、単に親のスコープで定義された関数を呼び出したいだけであれば & の構文があります。

以下もご参照ください。

• Lukasの孤立したスコープに関するブログ記事 (@, =, & をカバー)
• dnc253の説明 と=の
• 私のブログ的回答 スコープについて--。 ディレクティブ のセクション (一番下、「概要」のセクションの直前) に、分離したスコープとその親スコープの絵があります -- ディレクティブスコープは、あるプロパティに @ を、別のプロパティに = を使っています
• angularJSの&と@と=の違いは何ですか？