角方向遮挡与继承
我有三条指令：
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>似乎只有最外来者的指令才会被接收。我需要做什么才能使用这种继承模式，以及能够使用被屏蔽的标记填充最内部的指令呢？
柱塞：http://plnkr.co/edit/HvaJKmGH2agEOKHGrZvV
编辑澄清
我按照PascalPrecht的建议编辑了标记a(更新的柱塞在这里：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}}模型应该会一直绑定，不是吗？目前，只更新了最内部的范围.
当涉及到指令时，我想我对范围的界定感到困惑。
回答 2
Stack Overflow用户
发布于 2013-09-14 01:17:44
您不能使用原语值，您应该从作用域的控制器引用一个对象。
请参阅代码的修改版本：http://plnkr.co/edit/666Adad72zRJIasOzurs?p=preview
一定要看看这个很好的答案：What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
Stack Overflow用户
发布于 2013-09-13 21:22:23
您需要在指令模板中指定ng-transclude，以告诉content，在哪里放置已屏蔽的内容。然后，您可以通过提供一个获得屏蔽内容的模板来进行链接，在该模板中，由于已屏蔽的内容再次包含一个指令，该指令获取双向绑定的数据。
我相应地更新了您的plunk：http://plnkr.co/edit/sM3Jnj?p=preview
https://stackoverflow.com/questions/18794968
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号