My goal was to achieve something akin to the following simplified example:
class ButtonController {
set isFoo(value) {
console.log(value);
// do something here
}
}
angular.module('myApp', []).directive('mButton', () => {
return {
restrict: 'E',
replace: true,
controller: ButtonController,
controllerAs: 'button',
template: '<button class="btn" type="button">Blah</button>',
scope: {},
bindToController: {
isFoo: '='
}
};
});
and use the directive like so:
<div ng-app="myApp">
<m-button is-foo="true"></m-button>
</div>
view demo here: http://codepen.io/anon/pen/zrWRVr?editors=1010
However, this leads to a $compile:nonassign error which I was able to resolve by doing the following:
<div ng-app="myApp" ng-init="foo=true">
<m-button is-foo="foo"></m-button>
</div>
view demo here: http://codepen.io/anon/pen/VexweM?editors=1010
Nevertheless, I wanted to pass the boolean directly as shown in the previous markup. Is that not feasible? Must I really resort to something like the following if I desire to pass the boolean directly?
class ButtonController {
set isFooWatcher(value) {
console.log(value);
// do something here
}
}
angular.module('myApp', []).directive('mButton', () => {
return {
restrict: 'E',
replace: true,
controller: ButtonController,
controllerAs: 'button',
template: '<button class="btn" type="button">Blah</button>',
scope: {},
bindToController: {
isFoo: '='
},
link(scope, element, attrs, ctrl) {
scope.$watch(() => ctrl.isFoo, () => {
ctrl.isFooWatcher = ctrl.isFoo;
});
}
};
});
view demo here: http://codepen.io/anon/pen/QymxrZ?editors=1010