angularjs - 了解组件中的绑定

Question

我没有得到 angular components的绑定。我已将此材料 FAB 演示重新设计为组件。所以没有ng-controller指令了。但是我无法使绑定bindings: {isOpen: '='}工作。我收到以下错误：

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

代码如下所示：

<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: '='}thenmd-open="$ctrl.isOpen"不会传播。

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

Answer 1

isOpen: '='没有工作，因为我给了它一个原始值。为了使它起作用，它当然必须是一个参考。