了解组件中的绑定

Question

我没有在 angular components. I have reworked this material FAB demo 中得到组件的绑定。所以不再有 ng-controller 指令。但是我无法使 bindings: {isOpen: '='} 的绑定起作用。我收到以下错误：

Expression 'undefined' in attribute 'isOpen' used with directive 'tsButton' is non-assignable!

代码如下所示：

<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: '=' 没有工作，因为我给了它一个原始值。为此，它当然必须是 reference。

了解组件中的绑定

Understand Bindings in Components

angularjs

angularjs-bindings

angularjs-components