Angular 1.5 Komponentowe wiązanie dwukierunkowe nie działa

Question

Mam element Angular 1.5.3, który wydaje się nie aktualizować wartości wiązania dwukierunkowego. Mój kontroler zmienia wartości, które są przekazywane do komponentu.

Składnik wydaje się odczytać wartości domyślne, gdy kontroler jest inicjowany, ale potem zachowuje się tak, jakby był związany w jedną stronę. Wszelkie przyszłe zmiany związanych wartości nie są odczytywane w komponencie.

Przekonwertowałem to na podobną dyrektywę dotyczącą funkcjonowania, a wiążąca metoda dwukierunkowa działała dobrze. Czy zdarzają się przypadki zmiany lub coś podobnego, czego brakuje w komponentach? Czy muszę dodać określoną logikę do kontrolera komponentu, aby szablon komponentu mógł odczytać powiązane wartości?

szablon menu, które realizuje komponent:

<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> 

Sub komponent menu:

(function() { 
'use strict'; 
angular 
    .module('myApp.components') 
    .component('mySubMenu', { 
     bindings: { 
      menu: '=', 
      settings: '=' 
     }, 
     templateUrl: 'subMenu.component.html', 
     controller: function() { 
      // implementation that reads menu and settings 
     } 
    }); 
})(); 

Zmniejsz sub komponent menu szablon:

<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

Dopóki nie masz controller alias dla twojego komponentu, możesz użyć domyślnego controllerAs ali tak jak $ctrl. Można go zastąpić, używając opcji controllerAs w obiekcie definicji komponentu.

Markup

<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>