Understand Bindings in Components

Question

I don't get the binding in angular components. I have reworked this material FAB demo to a component. So there is no ng-controller directive anymore. However I cannot make the bindings of bindings: {isOpen: '='} to work. I get the following error:

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

The code looks like this:

<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;
    };
}
})();

If I omit the bindings: {isOpen: '='} then md-open="$ctrl.isOpen" is not propagated.

A workaround is to define methods for ng-mouseenter="$ctrl.open()" and ng-mouseleave="$ctrl.close()" that in controller assign the correct boolean to vm.isOpen. But as I say it is just a workaround that makes the code longer, among other things.

Answer 1

isOpen: '=' was not working because I was giving it a primitive value. For this to work it had to be a reference of course.