Bindings
属性バインディングのある孤立したスコープはちょっとクールですが、（今日ではごく普通の）プレーン文字列以外のオブジェクトをバインドする柔軟性に欠けます。 また、一方的なデータバインディングの制限により、子スコープで何か変更があっても親スコープを更新することはできません。 もし、それ以上のものが必要なら、バインディングのスコープを分離することで、解決できるかもしれません。 その方法はとても簡単で、「@」記号の代わりに「=」記号を使うだけです。
In HTML:
<div ng-controller="MyCtrl">
<my-component isolated-binding-person="person">
{{isolatedBindingPerson}}
</my-component>
</div>
In JavaScript:
var myModule = angular.module('myModule', )
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
isolatedBindingPerson:'='
}
};
})
.controller('MyCtrl', );
Notice in our HTML, we don’t need the double curly braces for interpolation anymore, which you can actually bind a variable, and even a function call! 次のコード スニペットを見てください。
-- HTML --<div ng-controller="MyCtrl">
<my-component isolated-binding-people="showPeople()">
<ul>
<li ng-repeat="person in isolatedBindingPeople">
{{person}}
</li>
</ul>
</my-component>
</div>-- JavaScript --var myModule = angular.module('myModule', )
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
isolatedBindingPeople:'='
}
};
})
.controller('MyCtrl', ;
}
}]);
当然のことながら、DOM では、人の名前のリストが出力されているのを見ることができます。 さらに、これは双方向のデータバインディングなので、ディレクティブに変更があると、実際にそのコントローラの変数がそれぞれ更新されます。 すごい 最後に、子スコープからイベントを発生させて、親スコープで関数を呼び出したり、子スコープからパラメータを渡したりしたい場合はどうしたらよいでしょうか？ これは複雑に聞こえますが、少し分解してみましょう。