[解決済み] AngularJS : ディレクティブのスコープで=と@の違い？重複

質問

を作成する スコープを分離する ディレクティブの中で 外部スコープ を インナースコープ . 属性にマッピングする方法を6種類見てきました。

1. =attr
2. &attr
3. 属性
4. =
5. &
6. @

これらのスコープマッピングの各オプションは何をするのでしょうか？

どのように解決するのですか？

これは混乱しがちですが、簡単な例で明らかになることを期待します。まず、モデルバインディングとビヘイビアを分離しましょう。

ここに、物事を結びつけるのに役立つフィドルがあります。 http://jsfiddle.net/jeremylikness/3pvte/

と説明されています......あなたのディレクティブがこのようなものである場合。

<my-directive target="foo"/> 

そうすると、スコープとして以下のような可能性があります。

{ target : '=' } 

これは、scope.target (ディレクティブ) を $scope.foo (外部スコープ) に束縛することになります。これは、=が双方向バインディングのためのもので、何も指定しない場合は、内側のスコープ上の名前とディレクティブ上の属性名を自動的にマッチングさせるためです。scope.targetを変更すると、$scope.fooが更新されます。

{ bar : '=target' } 

これは、scope.bar を $scope.foo に束縛します。これは、再び双方向バインディングを指定していますが、ディレクティブに "target" 属性にあるものが内側のスコープに "bar" として現れるように指示しているためです。scope.bar を変更すると、$scope.foo が更新されます。

{ target : '@' } 

これは、scope.target を "foo" に設定します。@ は "take it literally." を意味するので、scope.target への変更はディレクティブの外には伝わりません。

{ bar : '@target' } 

これは、scope.bar を "foo" に設定します。@ は target 属性から値を取るからです。scope.barの変更はディレクティブの外には伝わりません。

では、動作について説明します。外側のスコープがこれを持っていると仮定しましょう。

$scope.foo = function(parm1, parm2) { console.log(parm1 + ": " + parm2); } 

これには、いくつかのアクセス方法があります。もしあなたのHTMLが

<my-directive target='foo'>

次に

{ target : '=' } 

ディレクティブから scope.target(1,2) を呼び出すことができるようになります。

同じことです。

{ bar : '=target' }

ディレクティブから scope.bar(1,2) を呼び出すことを可能にします。

より一般的な方法は、これを動作として確立することです。技術的には、アンパサンドは親のコンテキストで式を評価します。これは重要なことです。だから、私は持つことができました。

<my-directive target="a+b" />

そして、親スコープが $scope.a = 1 と $scope.b = 2 である場合、私のディレクティブに。

{ target: '&' } 

scope.target()を呼び出すと、結果は3になりますね。これは重要なことです。バインディングは内側のスコープに関数として公開されますが、ディレクティブは式にバインドすることができるのです。

もっと一般的な方法としては

<my-directive target="foo(val1,val2)"> 

なら、使える。

{ target: '&' }

そしてディレクティブから呼び出す。

scope.target({val1: 1, val2: 2}); 

これは渡されたオブジェクトを受け取り、プロパティを評価された式のパラメータにマップし、それからビヘイビアを呼び出します。この場合は $scope.foo(1,2) を呼び出します。

こんなこともできます。

<my-directive target="foo(1, val)"/>

これは最初のパラメータをリテラル 1 に、そしてディレクティブからロックします。

{ bar: '&target' }

では

scope.bar(5) 

これは$scope.foo(1,5)を呼び出すことになります。