angularjs - bind attribute to object property in isolated scope -
i have directive (using isolated scope) makes utilize of directive changes flag hence had set container object. now, want able set flag outside. allow me "draw" you:
outerscope (outerflag1 = true, outerflag2 = true) directivescope (container.flag1 = false, container.flag2 = false) subdirectivescope (container.flag1 = false) subdirectivescope (container.flag2 = false) the flag variables in directivescope , subdirectivescope same, because container prototypically inherited. want able set outside, synchronize outerflagx container.flagx.
with isolated scope definition can map property so:
scope: { outerflag1: '=flag1' outerflag2: '=flag2' } however, need not allowed is
scope: { outerflag1: '=container.flag1' outerflag2: '=container.flag2' } how can done?
i added plunker based on 1 mikko provided (thanks lot): http://plnkr.co/edit/ht6zip
it have been great see real-life utilize case, in form of plunker/fiddle. problem might go away not defining isolated scope in subdirective.
given have next controller , 2 directives
// controller app.controller('mainctrl', function ($scope) { $scope.model = null; }); // top level directive app.directive('onedirective', function () { homecoming { restrict: 'e', scope: { flag: '=' }, template: '<label for="one">one directive</label><br>' + '<input type="text" name="one" ng-model="flag">' + '<br>' + '<other-directive></other-directive>' }; }); // nested directive app.directive('otherdirective', function () { homecoming { restrict: 'e', template: '<label for="other">other directive</label><br>' + '<input type="text" name="other" ng-model="flag">' }; }); and related html template
<body ng-controller="mainctrl"> <h4>directive scopes</h4> <div> <label for="number">parent scope</label><br> <input type="text" ng-model="model" placeholder="enter something..." /> <hr> </div> <div> <one-directive flag="model"></one-directive> </div> </body> that give liek
related plunker here http://plnkr.co/edit/7xhg8e
angularjs angularjs-directive angularjs-scope
No comments:
Post a Comment