角指令transclusion和继承 [英] angular directive transclusion and inheritance
问题描述
我有三个指令：
aiOutter，aiMiddle和aiInner。
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>
只有outter最指令似乎被拾起。什么我需要做的是能够使用这种继承模式以及能够与transcluded标记填充最内部的指令？
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
修改澄清
我编辑我的一个标记由Pascal precht（更新plunker是在这里的建议：的http：// plnkr.co/edit/HvaJKmGH2agEOKHGrZvV ）
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.
推荐答案
您不能使用原始值，你应该从你的范围的控制器参考的对象。
You can't use a primitive value and you should reference an object from your scope's controller.
请参阅您的code的修改版本：
http://plnkr.co/edit/666Adad72zRJIasOzurs?p=$p$pview
See a modified version of your code: http://plnkr.co/edit/666Adad72zRJIasOzurs?p=preview
和一定要看看这个优秀的答案：
<一href=\"http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs\">What范围是原型/原型继承的细微差别AngularJS？
And be sure to check out this excellent answer: What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
这篇关于角指令transclusion和继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
