了解组件中的绑定

Question

我没有角度组件的约束。 我已经将这个重要的FAB演示重做为一个组件。 因此，不再有ng-controller指令。 但是，我无法使绑定的bindings: {isOpen: '='}正常工作。 我收到以下错误：

与指令“ tsButton”一起使用的属性“ isOpen”中的表达式“ undefined”是不可分配的！

代码如下：

<div ng-cloak>
<md-fab-speed-dial
        md-open="$ctrl.isOpen"
        ng-mouseenter="$ctrl.isOpen=true"
        ng-mouseleave="$ctrl.isOpen=false">
    <!-- buttons and trigger -->
</md-fab-speed-dial>

(function () {
'use strict';

angular
    .module('trip')
    .component('tsButton', {
    templateUrl: "app/component/button.component.html",
    controller: ButtonController,
    });

    function ButtonController() {
        var vm = this;

        vm.isOpen = false;
    };
}
})();

如果我省略bindings: {isOpen: '='}则不会传播md-open="$ctrl.isOpen" 。

一种变通方法是为ng-mouseenter="$ctrl.open()"和ng-mouseleave="$ctrl.close()"定义方法，这些方法在控制器中将正确的布尔值分配给vm.isOpen 。 但是，正如我所说的，这只是使代码更长的一种解决方法。

Answer 1

isOpen: '='无效，因为我给了它一个原始值。 为此，它当然必须是参考 。