我有三个指令：
aiOutter、aiMiddle 和 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;
}
}
};
});
我的标记如下所示：
<body ng-controller="MainCtrl">
<div ai-outter data="name">
<div ai-middle data="data">
<div ai-inner data="data">
</div>
</div>
</div>
只有最外面的指令似乎被选中。我需要做什么才能使用这种继承模式以及能够使用嵌入标记填充最里面的指令？
Plunker：http ://plnkr.co/edit/HvaJKmGH2agEOKHGrZvV
编辑澄清
我按照 PascalPrecht 的建议编辑了我的标记 a（更新后的 plunker 在这里：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>
但是，我认为我遇到了范围界定问题。当我按下按钮时，{{name}} 模型应该一直绑定回来，不是吗？目前，只有最里面的范围正在更新。
我认为在涉及指令时我对范围界定感到困惑。