Angular 1.5組件雙向綁定不起作用

Question

我有一個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> 

Answer 1

只要你沒有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>