I've got three directives:
aiOutter, aiMiddle, and aiInner.
app.directive('aiOutter', function() {
return {
restrict: 'A',
scope: {
data: '='
},
template: '<div>Outter: {{data}}</div>',
transclude: true,
link: function(scope, elem, attrs) {
console.log('outter recognized');
return console.log('outter data:', scope.data);
}
};
}).directive('aiMiddle', function() {
return {
restrict: 'A',
scope: {
data: '='
},
template: '<div>Middle: {{data}}</div>',
transclude: true,
link: function(scope, elem, attrs) {
console.log('middle recognized');
return console.log('middle data:', scope.data);
}
};
}).directive('aiInner', function() {
return {
restrict: 'A',
scope: {
data: '='
},
template: '<div>Inner: {{data}}</div>',
link: function(scope, elem, attrs) {
console.log('inner recognized');
console.log('inner data:', scope.data);
scope.changeData = function(newData) {
scope.data = newData;
}
}
};
});
My markup looks like the following:
<body ng-controller="MainCtrl">
<div ai-outter data="name">
<div ai-middle data="data">
<div ai-inner data="data">
</div>
</div>
</div>
Only the outter most directive seems to be picked up. What do I need to do to be able to use this inheritance pattern as well as be able to populate the inner-most directive with transcluded markup?
Plunker: http://plnkr.co/edit/HvaJKmGH2agEOKHGrZvV
EDIT Clarification
I edited my markup a as suggested by PascalPrecht (the updated plunker is here: http://plnkr.co/edit/HvaJKmGH2agEOKHGrZvV )
<body ng-controller="MainCtrl">
<div ai-outter data="name" ng-transclude>
<div ai-middle data="name" ng-transclude>
<div ai-inner data="name" ng-transclude>
<h1> Hello, {{name}}</h1>
<button ng-click="name = 'bob'">Click me</button>
</div>
</div>
</div>
However, I think I'm running into a scoping issue. When I push the button, the {{name}} model should bind all the way back up, should it not? Currently, only the inner-most scope is being updated.
I think I'm confused about scoping when it comes to directives.
