Angular 1.Xのディレクティブは、デフォルトで双方向バインディングを持つように設定されています。コンポーネントにはデフォルトでスコープが分離されています。ビューは次のようになります。
<div class="my-view">
{{controllerVariable}}
</div>
上記をディレクティブとして設定した場合、controllerVariable
は次の状況で正しくロードされます。
<div ng-controller="myController">
<my-view></my-view>
</div>
しかし、以下を使用してコンポーネントとして設定した場合:
myApp.component('myView', {
templateUrl: '/path/to/view',
bindings: '='
});
その場合、変数値は表示されません。追加しようとしました$ctrl
を変数に:
<div class="my-view">
{{$ctrl.controllerVariable}}
</div>
しかし、これは値も表示しません。
ここで何が欠けていますか?
バインドしたい変数を明示的に述べる必要がありました:
myApp.component('myView', {
templateUrl: '/path/to/view',
bindings: {
controllerVariable: '@'
}
});
また、controllerVariable
は文字列なので、@
記号バインディングを使用する必要がありました。
ディレクティブからコンポーネントに値を渡す必要があります。
<my-view passed-var='ctrl.passedVar'></my-view>
そしてコンポーネント内:
myApp.component('myView', {
templateUrl: '/path/to/view',
bindings: {
passedVar: '='
},
controller: function () {
var vm = this;
console.log(vm.passedVar);
}
});
その後、例のようにコンポーネントでアクセスできるようになります
情報を処理するサービスを使用したり、ディレクティブのコントローラーにコンポーネントがアクセスできるようにするrequireを使用するなど、他にもいくつかの方法があります。上記の方法とその他の方法については、 https://docs.angularjs.org/guide/component を参照してください。