javascript - Cannot pass boolean to directive with Angular -
i'm trying pass boolean value controller isolated scope directive. when console.log(attrs) directive's link function, someboolean attribute string, rendering actual text "main.bool" instead of true or false value. when toggle boolean value outer controller, want updated in directive.
https://plnkr.co/edit/80cvlkhfvljnfl6g7fg9?p=preview
app.directive('mydirective', function() { return { restrict: 'e', replace: true, scope: { someboolean: '=' }, templateurl: 'mydirective.html', link: function(scope, element, attrs) { console.log(scope); console.log(attrs); }, controller: function($scope, $element, $attrs) { console.log(this); }, controlleras: 'directivectrl', bindtocontroller: true }; }); controller
app.controller('mainctrl', function($scope) { var vm = this; vm.bool = true; vm.change = function() { vm.bool = !vm.bool; } }); the template
<div> inside directive: {{someboolean}} </div>
as have attached directive controller directivectrl instead of mainctrl, you'll access variable someboolean using directivectrl.someboolean.
in case, change html to:
<div> inside directive: {{directivectrl.someboolean}} </div> another solution remove bindtocontroller property inside directive. this, don't need use controller name before variable. working plunker.
read more bindtocontroller feature here.
Comments
Post a Comment