Angular 1.5 Component Zwei-Wege-Bindung funktioniert nicht

Question

Ich habe eine Angular 1.5.3-Komponente, die die Werte für eine Zwei-Wege-Bindung nicht zu aktualisieren scheint. Mein Controller ändert die Werte, die an die Komponente übergeben werden.

Die Komponente scheint die Standardwerte zu lesen, wenn der Controller initialisiert wird, aber danach so wirkt, als wäre sie in eine Richtung gebunden. Alle zukünftigen Änderungen der gebundenen Werte werden in der Komponente nicht gelesen.

Ich konvertierte dies von einer ähnlich funktionierenden Direktive und die Zwei-Wege-Bindung funktionierte gut. Gibt es ein Änderungsereignis oder ähnliches, fehlen mir Komponenten? Muss ich dem Komponentencontroller spezifische Logik hinzufügen, damit die Komponentenvorlage die gebundenen Werte lesen kann?

Menü-Vorlage, die die Komponente implementiert:

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

Untermenü Komponente:

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

Vereinfachte Untermenü Komponentenvorlage:

<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

Solange Sie nicht haben controller Alias ​​für Ihre Komponente, könnten Sie Standard controllerAs Ali verwenden wie $ctrl. Sie können dies überschreiben, indem Sie die Option controllerAs im Komponentendefinitionsobjekt angeben.

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>