Looking into the complexities of nested directives, I am facing a challenge in establishing two-way binding between isolate scopes.
The main goal is to have the outerPower variable bind to the innerPower variable and update whenever the innerPower value increments.
Feel free to explore the demo on http://jsfiddle.net/hally9k/sqea6Ln7/
testApp.directive('innerDirective', function () {
return {
scope: {
innerPower: '&'
},
template: '<div><p>Inner Power = {{innerPower}}</p>' +
'<button ng-click="increment();">Power up!</button>' +
'</div>',
controller: function ($scope, $element, $attrs) {
$scope.increment = function() {
++$scope.innerPower;
}
}
};
});
testApp.directive('outerDirective', function () {
return {
scope: {
},
template: '<div><p>Outer Power = {{outerPower}}</p>' +
'<div inner-directive inner-power="outerPower"></div>' +
'</div>',
controller: function ($scope, $element, $attrs) {
$scope.outerPower = 0;
}
};
});