Angolare 1,5 componente legatura a due vie non funzionante

Question

Ho un componente angolare 1.5.3 che sembra non aggiornare i valori per un legame a due vie. Il mio controller cambia i valori che vengono passati al componente.

Il componente sembra leggere i valori predefiniti quando il controller viene inizializzato ma successivamente agisce come se fosse unidirezionale. Eventuali modifiche future ai valori associati non vengono letti nel componente.

L'ho convertito da una direttiva di funzionamento simile e il collegamento a due vie ha funzionato bene. C'è un evento di cambiamento, o qualcosa di simile, mi manca per i componenti? Devo aggiungere una logica specifica al controller del componente in modo che il modello del componente possa leggere i valori associati?

Modello del menu che implementa il componente:

<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 componente 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 
     } 
    }); 
})(); 

sub semplificato modello di componente di menu:

<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

Finché non si dispone di controller alias per il componente, è possibile utilizzare l'impostazione predefinita controllerAs ali come $ctrl. È possibile sovrascriverlo con l'opzione controllerAs nell'oggetto di definizione del componente.

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>