角度1.5コンポーネント双方向バインディングが機能しない

Question

私は、双方向バインディングの値を更新しないように見える角度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> 

Answer 1

controllerコンポーネントのエイリアスは、デフォルトのcontrollerAs aliを使用できます$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>