Angular 1.5.3コンポーネントがあり、双方向バインディングの値を更新していないようです。コントローラーがコンポーネントに渡される値を変更します。
コンポーネントは、コントローラーが初期化されるとデフォルト値を読み取るように見えますが、その後は一方向にバインドされているかのように動作します。バインドされた値に対する将来の変更は、コンポーネントで読み取られません。
これを同様の機能ディレクティブから変換したところ、双方向バインディングは問題なく機能しました。変更時のイベント、または同様のイベントがありますか?コンポーネントに不足していますか?コンポーネントテンプレートがバインドされた値を読み取れるように、コンポーネントコントローラーに特定のロジックを追加する必要がありますか?
コンポーネントを実装するメニューテンプレート:
<div data-ng-controller="MenuCtrl as ctrl">
<!-- below shows ctrl values updating when controller changes them -->
<pre>{{ctrl.menu}}</pre>
<pre>{{ctrl.settings}}</pre>
<!-- changes not reflected in component -->
<my-sub-menu menu="ctrl.menu" settings="ctrl.settings"></my-sub-menu>
</div>
サブメニューコンポーネント:
(function () {
'use strict';
angular
.module('myApp.components')
.component('mySubMenu', {
bindings: {
menu: '=',
settings: '='
},
templateUrl: 'subMenu.component.html',
controller: function () {
// implementation that reads menu and settings
}
});
})();
簡略化されたサブメニューコンポーネントテンプレート:
<ul>
<li ng-show="settings.menu1"><a href="/">Menu 1</a></li>
<li ng-show="settings.menu2"><a href="/">Menu 2</a></li>
<li ng-show="settings.menu3"><a href="/">Menu 3</a></li>
</ul>
<!-- changes to bound values not reflected in component template -->
<pre>{{menu}}</pre>
<pre>{{settings}}</pre>
コンポーネントにcontroller
エイリアスがない限り、デフォルトのcontrollerAs
エイリアスを$ctrl
として使用できます。コンポーネント定義オブジェクトにcontrollerAs
オプションを指定することで、オーバーライドできます。
マークアップ
<ul>
<li ng-show="$ctrl.settings.menu1"><a href="/">Menu 1</a></li>
<li ng-show="$ctrl.settings.menu2"><a href="/">Menu 2</a></li>
<li ng-show="$ctrl.settings.menu3"><a href="/">Menu 3</a></li>
</ul>
<pre>{{$ctrl.menu}}</pre>
<pre>{{$ctrl.settings}}</pre>