Angular 1.5 组件双向绑定不起作用答案

【问题标题】：Angular 1.5 Component Two Way Binding Not WorkingAngular 1.5 组件双向绑定不起作用
【发布时间】：2016-07-21 12:17:58
【问题描述】：

我有一个 Angular 1.5.3 组件，它似乎没有更新双向绑定的值。我的控制器更改了传递给组件的值。

当控制器初始化时，组件似乎读取了默认值，但此后就像是单向绑定一样。未来对绑定值的任何更改都不会在组件中读取。

我从一个类似的功能指令转换了它，两种方式的绑定工作得很好。是否存在我缺少组件的 on change 事件或类似事件？是否需要向组件控制器添加特定逻辑，以便组件模板可以读取绑定值？

实现组件的菜单模板：

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

【问题讨论】：

不应该是{{$ctrl.menu}}和{{$ctrl.settings}}吗？

标签： javascript angularjs angularjs-directive angularjs-components

【解决方案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>

【讨论】：