AngularJSのディレクティブスコープの「@」と「=」の違いは何ですか？

このトピックに関するAngularJSのドキュメントを注意深く読み、次にディレクティブをいじっています。こちらがフィドルです。

そしてここにいくつかの関連するスニペットがあります：

• HTMLから：

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

• ペインディレクティブから：

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

取得できないことがいくつかあります。

• なぜ"{{title}}"with '@'と"title"一緒に使用する必要があるの'='ですか？
• 要素を属性で装飾せずに、親スコープに直接アクセスすることもできますか？
• ドキュメントには、「式を介して分離されたスコープから親スコープにデータを渡すことが望ましい場合が多い」とありますが、双方向バインディングでもうまく機能するようです。なぜ発現経路の方が良いのでしょうか？

式の解決策を示す別のフィドルも見つけました：http : //jsfiddle.net/maxisam/QrCXh/

「{{title}}」を「@」で使用し、「title」を「=」で使用する必要があるのはなぜですか？

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

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

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

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

では=、あなたが観察$を使用する必要はありません。

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

はい、ただし分離スコープを使用しない場合のみ。ディレクティブからこの行を削除します

scope: { ... }

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

ドキュメントには「分離されたスコープから式を介して親スコープにデータを渡すことが望ましい」と書かれていますが、双方向バインディングでもうまく機能するようです。なぜ発現経路の方が良いのでしょうか？

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

こちらもご覧ください

• Lukasの分離スコープのブログ投稿（@、=、＆をカバー）
• @および=のdnc253の説明
• スコープに関するブログのような回答 - ディレクティブセクション（下部、概要セクションの直前）には、分離スコープとその親スコープの画像があります-ディレクティブスコープは、あるプロパティに@を使用し、別のプロパティに=を使用します
• angularJSの＆vs @と=の違いは何ですか

そこ偉大な答えの多くはここにあるが、私は間の違いに私の視点を提供したいと思います@、=と&結合私のために有用であることが証明されています。

3つのバインディングはすべて、要素の属性を通じて親スコープからディレクティブの分離スコープにデータを渡す方法です。

1. @バインディングは文字列を渡すためのものです。これらの文字列は{{}}、補間された値の式をサポートします。例えば： 。補間された式は、ディレクティブの親スコープに対して評価されます。

2. =バインディングは、双方向モデルバインディング用です。親スコープ内のモデルは、ディレクティブの分離スコープ内のモデルにリンクされています。1つのモデルへの変更は他のモデルに影響し、逆もまた同様です。

3. ＆バインディングは、メソッドをディレクティブのスコープに渡して、ディレクティブ内で呼び出せるようにするためのものです。このメソッドはディレクティブの親スコープに事前バインドされており、引数をサポートしています。たとえば、メソッドが親スコープのhello（name）の場合、ディレクティブ内からメソッドを実行するには、$ scope.hello（{name： 'world'}）を呼び出す必要があります

短い説明でスコープバインディングを参照することで、これらの違いを覚えやすくなります。

• @ 属性文字列バインディング
• = 双方向モデルバインディング
• & コールバックメソッドのバインド

シンボルは、スコープ変数がディレクティブの実装内で何を表すかについても明確にします。

• @ ストリング
• = モデル
• & 方法

有用性の順に（とにかく私にとって）：

1. =
2. @
3. ＆

=双方向結合手段ので、親スコープに変数への参照。つまり、ディレクティブで変数を変更すると、親スコープでも変更されます。

@ 変数がディレクティブにコピー（複製）されることを意味します。

私の知る限り、<pane bi-title="{{title}}" title="{{title}}">{{text}}</pane>うまくいくはずです。bi-titleディレクティブで変更できる親スコープ変数値を受け取ります。

親スコープ内のいくつかの変数を変更する必要がある場合、ディレクティブ内から親スコープで関数を実行できます（またはサービスを介してデータを渡します）。

これが実際の例でどのように機能するかをもっと見たい場合。http://jsfiddle.net/juanmendez/k6chmnch/

var app = angular.module('app', []);
app.controller("myController", function ($scope) {
    $scope.title = "binding";
});
app.directive("jmFind", function () {
    return {
        replace: true,
        restrict: 'C',
        transclude: true,
        scope: {
            title1: "=",
            title2: "@"
        },
        template: "<div><p>{{title1}} {{title2}}</p></div>"
    };
});

@ 文字列として取得

• これはバインディングをまったく作成しません。あなたは単にあなたが渡した単語を文字列として取得しています

= 双方向バインディング

• コントローラーから行われた変更は、ディレクティブが保持する参照に反映され、その逆も同様です

&スコープは、で渡されたオブジェクトを返す関数を取得するため、動作が少し異なります。これが機能するために必要だったと思います。フィドルはこれを明確にする必要があります。

• このゲッター関数を呼び出した後、結果のオブジェクトは次のように動作します。
  • 関数が渡された場合：関数は、呼び出されたときに親（コントローラー）クロージャーで実行されます。
  • 場合非機能は、単に何のバインディングを持っていないオブジェクトのローカルコピーを取得：渡されました

このフィドルは、それらがどのように機能するかを示す必要があります。get...名前のスコープ関数に特別な注意を払って、私が何を意味しているのかよく理解してください&

ディレクティブにスコープを追加する方法は3つあります。

1. 親スコープ：これはデフォルトのスコープ継承です。

ディレクティブとその親（その中にあるコントローラー/ディレクティブ）のスコープは同じです。そのため、ディレクティブ内のスコープ変数に加えられた変更は、親コントローラーにも反映されます。これはデフォルトであるため、指定する必要はありません。

2. 子スコープ：ディレクティブは、ディレクティブのスコープ変数をtrueに指定した場合、親スコープから継承する子スコープを作成します。

ここで、ディレクティブ内のスコープ変数を変更しても、親スコープには反映されませんが、スコープ変数のプロパティを変更すると、親のスコープ変数を実際に変更したため、親スコープに反映されます。

例、

app.directive("myDirective", function(){

    return {
        restrict: "EA",
        scope: true,
        link: function(element, scope, attrs){
            scope.somvar = "new value"; //doesnot reflect in the parent scope
            scope.someObj.someProp = "new value"; //reflects as someObj is of parent, we modified that but did not override.
        }
    };
});

3. 分離スコープ：これは、コントローラースコープから継承しないスコープを作成する場合に使用されます。

これは、プラグインを作成しているときに発生します。これにより、ディレクティブは汎用的になり、HTMLに配置でき、その親スコープの影響を受けません。

ここで、親スコープとの相互作用が必要ない場合は、スコープを空のオブジェクトとして指定できます。お気に入り、

scope: {} //this does not interact with the parent scope in any way

親スコープとのやり取りが必要なので、ほとんどの場合これは当てはまりません。そのため、値/変更の一部をパススルーする必要があります。このため、以下を使用します。

1. "@"   (  Text binding / one-way binding )
2. "="   ( Direct model binding / two-way binding )
3. "&"   ( Behaviour binding / Method binding  )

@は、コントローラースコープからの変更がディレクティブスコープに反映されることを意味しますが、ディレクティブスコープの値を変更しても、コントローラースコープ変数は影響を受けません。

@は常に、マップされた属性が式であることを期待しています。これは非常に重要です; 「@」プレフィックスを機能させるため、属性値を{{}}内にラップする必要があります。

=双方向であるため、ディレクティブスコープの変数を変更すると、コントローラースコープ変数も影響を受けます

＆は、必要に応じてディレクティブから呼び出すことができるように、コントローラースコープメソッドをバインドするために使用されます

ここでの利点は、変数の名前がコントローラースコープとディレクティブスコープで同じである必要がないことです。

たとえば、ディレクティブスコープには、コントローラースコープの変数「contVar」と同期する変数「dirVar」があります。1つのコントローラーが変数v1と同期できる一方で、同じディレクティブを使用する別のコントローラーがdirVarに変数v2との同期を要求できるため、これはディレクティブに多くの能力と一般化をもたらします。

以下は使用例です。

ディレクティブとコントローラーは次のとおりです。

 var app = angular.module("app", []);
 app.controller("MainCtrl", function( $scope ){
    $scope.name = "Harry";
    $scope.color = "#333333";
    $scope.reverseName = function(){
     $scope.name = $scope.name.split("").reverse().join("");
    };
    $scope.randomColor = function(){
        $scope.color = '#'+Math.floor(Math.random()*16777215).toString(16);
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: {
            name: "@",
            color: "=",
            reverse: "&"
        },
        link: function(element, scope, attrs){
           //do something like
           $scope.reverse(); 
          //calling the controllers function
        }
    };
});

そしてhtml（@と=の違いに注意してください）：

<div my-directive
  class="directive"
  name="{{name}}"
  reverse="reverseName()"
  color="color" >
</div>

ここにそれをうまく説明するブログへのリンクがあります。

単に使用できます：-

1. @：-一方向データバインディングの文字列値。一方向のデータバインディングでは、スコープ値のみをディレクティブに渡すことができます

2. =：-双方向データバインディングのオブジェクト値。双方向のデータバインディングでは、htmlだけでなくディレクティブでもスコープ値を変更できます。

3. ＆：-メソッドと関数。

編集する

当社ではコンポーネントの定義角度のバージョン1.5以上
のバインディング、4つの異なるタイプがあります。

1. = 双方向データバインディング：-値を変更すると、自動的に更新されます

2. < 一方向バインディング：-親スコープからパラメーターを読み取り、更新しない場合。

3. @これは文字列パラメータ用です

4. &これは、コンポーネントが親スコープに何かを出力する必要がある場合のコールバック用です

それらの違いを示すAngularコードを含む小さなHTMLファイルを作成しました。

<!DOCTYPE html>
<html>
  <head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myCtrl as VM">
      <a my-dir
        attr1="VM.sayHi('Juan')" <!-- scope: "=" -->
        attr2="VM.sayHi('Juan')" <!-- scope: "@" -->
        attr3="VM.sayHi('Juan')" <!-- scope: "&" -->
      ></a>
    </div>
    <script>
    angular.module("myApp", [])
    .controller("myCtrl", [function(){
      var vm = this;
      vm.sayHi = function(name){
        return ("Hey there, " + name);
      }
    }])
    .directive("myDir", [function(){
      return {
        scope: {
          attr1: "=",
          attr2: "@",
          attr3: "&"
        },
        link: function(scope){
          console.log(scope.attr1);   // =, logs "Hey there, Juan"
          console.log(scope.attr2);   // @, logs "VM.sayHi('Juan')"
          console.log(scope.attr3);   // &, logs "function (a){return h(c,a)}"
          console.log(scope.attr3()); // &, logs "Hey there, Juan"
        }
      }
    }]);
    </script>
  </body>
</html>

=方法がある結合2ウェイあなたが持っていることができ、ライブあなたのディレクティブ内部の変更を。誰かがその変数をディレクティブから変更すると、変更されたデータがディレクティブ内にありますが、@ wayは双方向バインディングではありません。Textのように機能します。一度バインドすると、その値のみが得られます。

より明確にするために、この素​​晴らしい記事を使うことができます：

AngularJSディレクティブスコープ「@」と「=」

この質問はすでに打ちのめされていますが、AngularJSスコープである恐ろしい混乱に他の誰かが苦労している場合に備えて、とにかくこれを共有します。これはカバーする=、<、@、&と::。完全な記事はここにあります。

=双方向バインディングを確立します。親のプロパティを変更すると、子も変更されます。逆も同様です。

<親から子への一方向のバインディングを確立します。親のプロパティを変更すると子も変更されますが、子のプロパティを変更しても親のプロパティには影響しません。

@子プロパティにタグ属性の文字列値を割り当てます。属性に式が含まれている場合、式が別の文字列に評価されるたびに子プロパティが更新されます。例えば：

<child-component description="The movie title is {{$ctrl.movie.title}}" />

bindings: {
    description: '@', 
}

ここdescriptionで、子スコープのプロパティは式の現在の値になります"The movie title is {{$ctrl.movie.title}}"。ここmovieで、は親スコープのオブジェクトです。

&は少しトリッキーで、実際にそれを使用する説得力のある理由はないようです。これにより、親スコープ内の式を評価し、パラメーターを子スコープの変数で置き換えることができます。例（plunk）：

<child-component 
  foo = "myVar + $ctrl.parentVar + myOtherVar"
</child-component>

angular.module('heroApp').component('childComponent', {
  template: "<div>{{  $ctrl.parentFoo({myVar:5, myOtherVar:'xyz'})  }}</div>",
  bindings: {
    parentFoo: '&foo'
  }
});

を指定するとparentVar=10、式parentFoo({myVar:5, myOtherVar:'xyz'})は次のように評価され5 + 10 + 'xyz'、コンポーネントは次のようにレンダリングされます。

<div>15xyz</div>

この複雑な機能をいつ使用したいですか？&多くの場合、親スコープのコールバック関数を子スコープに渡すために使用されます。ただし、実際には、 '<'を使用して関数を渡すことで同じ効果を得ることができます。これはより簡単で、パラメーターを渡すための厄介な中括弧構文を回避します（{myVar:5, myOtherVar:'xyz'}）。考慮してください：

を使用したコールバック&：

<child-component parent-foo="$ctrl.foo(bar)"/>

angular.module('heroApp').component('childComponent', {
  template: '<button ng-click="$ctrl.parentFoo({bar:'xyz'})">Call foo in parent</button>',
  bindings: {
    parentFoo: '&'
  }
});

を使用したコールバック<：

<child-component parent-foo="$ctrl.foo"/>

angular.module('heroApp').component('childComponent', {
  template: '<button ng-click="$ctrl.parentFoo('xyz')">Call foo in parent</button>',
  bindings: {
    parentFoo: '<'
  }
});

オブジェクト（および配列）は参照によって子スコープに渡され、コピーされないことに注意してください。つまり、一方向のバインドであっても、親スコープと子スコープの両方で同じオブジェクトを操作しているということです。

実際のさまざまなプレフィックスを確認するには、このplunkを開きます。

[公式ドキュメント]
AngularJSの新しいバージョンでは、子スコーププロパティが1回だけ更新される1回限りのバインディングを持つオプションが導入されています。これにより、親プロパティを監視する必要がなくなるため、パフォーマンスが向上します。構文は上記とは異なります。ワンタイムバインディングを宣言するに::は、コンポーネントタグの式の前に追加します。

<child-component 
  tagline = "::$ctrl.tagline">
</child-component>

これは、tagline一方向または双方向のバインディングを確立せずに、値を子スコープに伝播します。注：taglineが最初undefinedに親スコープ内にある場合、angularはそれが変更されるまで監視し、子スコープ内の対応するプロパティを一度更新します。

概要

次の表は、プロパティがオブジェクト、配列、文​​字列などであるかどうかに応じて、プレフィックスがどのように機能するかを示しています。

@ローカルスコーププロパティは、ディレクティブの外部で定義された文字列値にアクセスするために使用されます。

=外部スコープとディレクティブの分離スコープの間に双方向バインディングを作成する必要がある場合は、=文字を使用できます。

＆ローカルスコーププロパティにより、ディレクティブのコンシューマーは、ディレクティブが呼び出すことができる関数を渡すことができます。

例を使って明確に理解できる以下のリンクを確認してください。私はそれが本当に非常に役立つので、共有することを考えました。

http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

例のようにスコープがローカルの場合でも、プロパティを介して親スコープにアクセスできます$parent。以下のコードでは、それtitleが親スコープで定義されていると想定しています。その後、次のようにタイトルにアクセスできます$parent.title。

link : function(scope) { console.log(scope.$parent.title) },
template : "the parent has the title {{$parent.title}}"

ただし、ほとんどの場合、属性を使用すると同じ効果が得られます。

「分離されたスコープから式を介して親スコープにデータを渡す」ために使用される「＆」表記の例（および双方向のデータバインディングは使用できませんでした）はディレクティブにありましたng-repeat内の特別なデータ構造をレンダリングするため。

<render data = "record" deleteFunction = "dataList.splice($index,1)" ng-repeat = "record in dataList" > </render>

レンダリングの一部には削除ボタンがあり、ここでは＆を介して外部スコープから削除関数をアタッチすると便利でした。renderディレクティブの内部は次のようになります

scope : { data = "=", deleteFunction = "&"},
template : "... <button ng-click = "deleteFunction()"></button>"

双方向のデータバインディング、つまり、レコードがすぐに削除されてレンダリングされdata = "="ないため、削除機能がすべての$digestサイクルで実行されるため、使用できません。

私はフィドルですべての可能なオプションを実装しました。

それはすべてのオプションを扱います：

scope:{
    name:'&'
},

scope:{
    name:'='
},

scope:{
    name:'@'
},

scope:{

},

scope:true,

https://jsfiddle.net/rishulmatta/v7xf2ujm

それらの主な違いはただ

@ Attribute string binding
= Two-way model binding
& Callback method binding

@=他の答えを見てください。

一つの落とし穴についてのTL; DR; 親から式（他の回答の例のように機能するだけでなく）を取得し、式を呼び出すディレクティブで関数として設定します。そして、この関数は、オブジェクトを変数で渡すことにより、式の任意の変数（関数名も含む）を置き換える機能を備えています。 &

&

説明されて
&いるのは式の参照です。つまり<myDirective expr="x==y"></myDirective>
、ディレクティブで何かを渡す exprと、これは次のような式を呼び出す関数になります
function expr(){return x == y}。
そのため、ディレクティブのhtml <button ng-click="expr()"></button>は式を呼び出します。ディレクティブのjsでは$scope.expr()、式も呼び出します。
式は、親の$ scope.xおよび$ scope.yで呼び出されます。
パラメータを上書きすることができます！
これらを呼び出しによって設定した場合、たとえば<button ng-click="expr({x:5})"></button>
、式はパラメーターxと親のパラメーターを使用して呼び出されますy。
両方をオーバーライドできます。
今、あなたは知っています、なぜ<button ng-click="functionFromParent({x:5})"></button>うまくいくか。
それは親の式を呼び出すだけなので（例えば<myDirective functionFromParent="function1(x)"></myDirective>）そして、この場合、指定可能なパラメータで可能な値を置き換えますx。
それは可能性があります：
<myDirective functionFromParent="function1(x) + 5"></myDirective>
または
<myDirective functionFromParent="function1(x) + z"></myDirective>
子呼び出しで：
<button ng-click="functionFromParent({x:5, z: 4})"></button>。
または関数を置き換えても：
<button ng-click="functionFromParent({function1: myfn, x:5, z: 4})"></button>。

それは単なる式であり、関数であるか、多数の関数であるか、または単に比較であるかは関係ありません。そして、あなたは置き換えることができます任意のこの式の変数を。

例：
ディレクティブテンプレートと呼び出されたコード：
親は$ scope.x、$ scope.yを定義しました：
親テンプレート：<myDirective expr="x==y"></myDirective>
<button ng-click="expr()"></button>コール$scope.x==$scope.y
<button ng-click="expr({x: 5})"></button>コール5 == $scope.y
<button ng-click="expr({x:5, y:6})"></button>コール5 == 6

親が$ scope.function1、$ scope.x、$ scope.yを定義しました：
親テンプレート：<myDirective expr="function1(x) + y"></myDirective>

<button ng-click="expr()"></button>通話$scope.function1($scope.x) + $scope.y
<button ng-click="expr({x: 5})"></button>の通話の$scope.function1(5) + $scope.y
<button ng-click="expr({x:5, y:6})"></button>通話の$scope.function1(5) + 6
ディレクティブは、関数として$ scope.myFnがあります。
<button ng-click="expr({function1: myFn, x:5, y:6})"></button>電話を$scope.myFn(5) + 6

「{{title}}」と「@」および「title」と「=」を使用する必要があるのはなぜですか？

{{title}}を使用すると、親スコープの値のみがディレクティブビューに渡されて評価されます。これは一方向に制限されています。つまり、変更は親スコープに反映されません。子ディレクティブで行われた変更を親スコープにも反映する場合は、「=」を使用できます。これは双方向です。

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

ディレクティブにスコープ属性がある場合（scope：{}）、親スコープに直接アクセスできなくなります。しかし、それでもscope。$ parentなどを介してそれにアクセスすることは可能です。ディレクティブからスコープを削除すると、直接アクセスできます。

ドキュメントには「分離されたスコープから式を介して親スコープにデータを渡すことが望ましい」と書かれていますが、双方向バインディングでもうまく機能するようです。なぜ発現経路の方が良いのでしょうか？

状況に応じて異なります。データを使用して式または関数を呼び出す場合は＆を使用し、データを共有する場合は '='を使用して双方向の方法を使用できます

以下のリンクでディレクティブにデータを渡す複数の方法の違いを見つけることができます：

AngularJS –分離スコープ– @ vs = vs＆

http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs

@属性文字列バインディング（一方向）=双方向モデルバインディングとコールバックメソッドバインディング

@は、ローカル/ディレクティブスコーププロパティをDOM属性の評価値にバインドします。=ローカル/ディレクティブスコーププロパティを親スコーププロパティにバインドします。＆バインディングは、メソッドをディレクティブのスコープに渡して、ディレクティブ内で呼び出せるようにするためのものです。

@属性文字列バインディング=双方向モデルバインディングとコールバックメソッドバインディング