angularJSの＆vs @と=の違いは何ですか
回答:
@ディレクティブ属性で定義された値をディレクティブの分離スコープに渡すことができます。値は、単純な文字列値（myattr="hello"）にすることも、式が埋め込まれたAngularJS補間文字列（）にすることもできますmyattr="my_{{helloText}}"。親スコープから子ディレクティブへの「一方向」の通信と考えてください。John Lindquistは、これらのそれぞれを説明する一連の短いスクリーンキャストを公開しています。@のスクリーンキャストはこちら：https : //egghead.io/lessons/angularjs-isolate-scope-attribute-binding
&ディレクティブの分離スコープが値を親スコープに渡して、属性で定義された式で評価できるようにします。ディレクティブ属性は暗黙的に式であり、二重中括弧式構文を使用しないことに注意してください。これはテキストで説明するのが難しいです。＆のスクリーンキャストはこちら：https : //egghead.io/lessons/angularjs-isolate-scope-expression-binding
=ディレクティブの分離スコープと親スコープの間に双方向バインディング式を設定します。子スコープでの変更は親に伝達され、その逆も同様です。=は@と＆の組み合わせと考えてください。=のスクリーンキャストはこちら：https : //egghead.io/lessons/angularjs-isolate-scope-two-way-binding
そして最後に、3つすべてを1つのビューで一緒に使用することを示すスクリーンキャストがあります：https : //egghead.io/lessons/angularjs-isolate-scope-review
JavaScriptプロトタイプ継承の観点から概念を説明したいと思います。うまくいけば、理解するのに役立ちます。
ディレクティブのスコープを定義するには、3つのオプションがあります。
scope: false：角度のデフォルト。ディレクティブのスコープは、その親スコープ（parentScope）の1つです。scope: true：Angularはこのディレクティブのスコープを作成します。スコープはプロトタイプ的にから継承しparentScopeます。scope: {...}：分離スコープについて以下に説明します。
指定 scope: {...}すると、が定義されますisolatedScope。アンはisolatedScopeからプロパティを継承しないparentScopeもののを、isolatedScope.$parent === parentScope。これは、次のように定義されます。
app.directive("myDirective", function() {
return {
scope: {
... // defining scope means that 'no inheritance from parent'.
},
}
})isolatedScopeに直接アクセスできませんparentScope。ただし、ディレクティブはと通信する必要がある場合がありますparentScope。彼らは@、=と&。シンボルの使用に関するトピック@、=および&を使用しisolatedScopeたシナリオについての話です。
これは通常、モーダルなど、さまざまなページで共有されるいくつかの一般的なコンポーネントに使用されます。分離されたスコープは、グローバルスコープの汚染を防ぎ、ページ間での共有が簡単です。
基本的なディレクティブは次のとおりです。 http //jsfiddle.net/7t984sf9/5/。説明するイメージは次のとおりです。
@：一方向バインディング
@プロパティをからparentScopeに渡すだけですisolatedScopeです。これはと呼ばれます。one-way bindingつまり、parentScopeプロパティの値を変更することはできません。JavaScriptの継承に慣れている場合は、次の2つのシナリオを簡単に理解できます。
interpolatedProp例のように、バインディングプロパティがプリミティブ型の場合：変更できますinterpolatedProp、parentProp1変更されません。しかし、あなたがの値を変更した場合parentProp1、interpolatedProp（角$ダイジェストとき）新しい値で上書きされます。バインディングプロパティが次のようなオブジェクトの場合
parentObj：isolatedScope参照であるため、値を変更するとこのエラーがトリガーされます。TypeError: Cannot assign to read only property 'x' of {"x":1,"y":2}
=：双方向バインディング
=はと呼ばれますtwo-way binding。つまり、の変更childScopeにより、の値も更新されますparentScope。このルールは、プリミティブとオブジェクトの両方に機能します。のバインディングタイプをparentObjに=変更すると、の値を変更できることがわかりますparentObj.x。典型的な例はngModelです。
&：関数バインディング
&ディレクティブがparentScope関数を呼び出し、ディレクティブから値を渡すことを許可します。たとえば、JSFiddle：＆ディレクティブスコープを確認します。
次のようなディレクティブでクリック可能なテンプレートを定義します。
<div ng-click="vm.onCheck({valueFromDirective: vm.value + ' is from the directive'})">次のようなディレクティブを使用します。
<div my-checkbox value="vm.myValue" on-check="vm.myFunction(valueFromDirective)"></div>変数 valueFromDirectiveは、を介してディレクティブから親コントローラーに渡され{valueFromDirective: ...ます。
リファレンス：スコープについて
私のフィドルではなく、http：//jsfiddle.net/maxisam/QrCXh/が違いを示しています。重要な部分は次のとおりです。
scope:{
/* NOTE: Normally I would set my attributes and bindings
to be the same name but I wanted to delineate between
parent and isolated scope. */
isolatedAttributeFoo:'@attributeFoo',
isolatedBindingFoo:'=bindingFoo',
isolatedExpressionFoo:'&'
} @：一方向バインディング
=：双方向バインディング
＆：関数バインディング
AngularJS –分離スコープ– @ vs = vs＆
説明付きの短い例は、以下のリンクから入手できます。
http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs
@ –一方向バインディング
ディレクティブで：
scope : { nameValue : "@name" }ビューで：
<my-widget name="{{nameFromParentScope}}"></my-widget>= –双方向バインディング
ディレクティブで：
scope : { nameValue : "=name" },
link : function(scope) {
scope.name = "Changing the value here will get reflected in parent scope value";
}ビューで：
<my-widget name="{{nameFromParentScope}}"></my-widget>＆–関数呼び出し
ディレクティブで：
scope : { nameChange : "&" }
link : function(scope) {
scope.nameChange({newName:"NameFromIsolaltedScope"});
}ビューで：
<my-widget nameChange="onNameChange(newName)"></my-widget>これを本当に手に入れるのに長い時間がかかりました。私にとって重要なのは、 "@"がその場で評価され、 "="が実際にオブジェクト自体を渡す定数としてディレクティブに渡されるものであることを理解することでした。
これを説明する素晴らしいブログ投稿があります：http : //blog.ramses.io/technical/AngularJS-the-difference-between-@-&-and-=-when-declaring-directives-using-isolate-scopes