AngularJS
AngularJSバインディングオプション（ `=`、 `@`、 `＆`など）

備考

@一方向バインディング、属性バインディング

文字列や数値などのリテラル値（オブジェクトではない）を渡します。

子スコープは独自の値を持ちます。値を更新すると、親スコープは独自の古い値を持ちます（子スコープは括弧スコープの値を変更できません）。親スコープの値を変更すると、子スコープの値も変更されます。すべての補間は、ダイジェスト作成だけでなく、ダイジェスト呼び出しに毎回表示されます。

<one-way text="Simple text." <!-- 'Simple text.' -->
         simple-value="123" <!-- '123' Note, is actually a string object. -->
         interpolated-value="{{parentScopeValue}}" <!-- Some value from parent scope. You can't change parent scope value, only child scope value. Note, is actually a string object. -->
         interpolated-function-value="{{parentScopeFunction()}}" <!-- Executes parent scope function and takes a value. -->
         
         <!-- Unexpected usage. -->
         object-item="{{objectItem}}" <!-- Converts object|date to string. Result might be: '{"a":5,"b":"text"}'. -->
         function-item="{{parentScopeFunction}}"> <!-- Will be an empty string. -->
</one-way>

=双方向バインディング。

参照で値を渡すと、両方のスコープ間で値を共有し、両方のスコープから値を操作する必要があります。補間には{{...}}を使用すべきではありません。

<two-way text="'Simple text.'" <!-- 'Simple text.' -->
         simple-value="123" <!-- 123 Note, is actually a number now. -->
         interpolated-value="parentScopeValue" <!-- Some value from parent scope. You may change it in one scope and have updated value in another. -->
         object-item="objectItem" <!-- Some object from parent scope. You may change object properties in one scope and have updated properties in another. -->
         
         <!-- Unexpected usage. -->
         interpolated-function-value="parentScopeFunction()" <!-- Will raise an error. -->
         function-item="incrementInterpolated"> <!-- Pass the function by reference and you may use it in child scope. -->
</two-way>

ファンクションの定義を変更するスコープに2つの不要ウォッチャが作成されるようにするには、ウォッチャ数を最小限に抑える必要があります。

＆関数バインディング、式バインディング

メソッドをディレクティブに渡します。親スコープのコンテキストで式を実行する方法を提供します。メソッドは親のスコープ内で実行されますが、そこに子スコープのパラメータを渡すことができます。補間には{{...}}を使用すべきではありません。 ＆をディレクティブで使用すると、親スコープに対して評価された式の値を返す関数を生成します（参照を渡す場所と同じではありません）。

<expression-binding interpolated-function-value="incrementInterpolated(param)" <!-- interpolatedFunctionValue({param: 'Hey'}) will call passed function with an argument. -->
                    function-item="incrementInterpolated" <!-- functionItem({param: 'Hey'})() will call passed function, but with no possibility set up a parameter. -->
                    text="'Simple text.'"  <!-- text() == 'Simple text.'-->
                    simple-value="123" <!-- simpleValue() == 123 -->
                    interpolated-value="parentScopeValue" <!-- interpolatedValue() == Some value from parent scope. -->
                    object-item="objectItem"> <!-- objectItem() == Object item from parent scope. -->
</expression-binding>

すべてのパラメータは関数にラップされます。

簡単なサンプルを使用したバインディング

angular.component("SampleComponent", {
  bindings: {
     title: '@',
     movies: '<',
     reservation: "=",
     processReservation: "&"
  }
});

ここではすべての束縛要素があります。

@は、ウォッチャーなしで、親スコープから子スコープまで、非常に基本的なバインディングが必要であることを示します。親スコープのすべての更新は親スコープにとどまり、子スコープの更新は親スコープに伝達されません。

< 片方向バインディングを示します。親スコープの更新は子スコープに伝播されますが、子スコープの更新は親スコープに適用されません。

=はすでに双方向バインディングとして知られています。親スコープの更新はすべて子スコープに適用され、すべての子更新は親スコープに適用されます。

＆は出力バインディングに使用されます。コンポーネントのドキュメントによると、親スコープメソッドを参照するために使用する必要があります。子スコープを操作する代わりに、更新されたデータで親メソッドを呼び出すだけです！

オプションの属性をバインドする

bindings: {
   mandatory: '=' 
   optional: '=?',
   foo: '=?bar'
}

オプションの属性は、疑問符でマークする必要があります。 =?または=?bar ($compile:nonassign)例外に対する保護です。