问题描述
限时送ChatGPT账号..我有三个指令:
aiOutter、aiMiddle 和 aiInner.
app.directive('aiOutter', function() {返回 {限制:'A'，范围: {数据:'='},模板:'<div>外层:{{data}}</div>',转置:真实，链接:功能(范围，元素，属性){console.log('外部识别');return console.log('外部数据:', scope.data);}};}).directive('aiMiddle', function() {返回 {限制:'A'，范围: {数据:'='},模板:'<div>中间:{{data}}</div>',转置:真实，链接:功能(范围，元素，属性){console.log('中间识别');return console.log('中间数据:', scope.data);}};}).directive('aiInner', function() {返回 {限制:'A'，范围: {数据:'='},模板:'<div>内部:{{data}}</div>',链接:功能(范围，元素，属性){console.log('内部识别');console.log('内部数据:', scope.data);scope.changeData = 函数(新数据){scope.data = newData;}}};});我的标记如下所示:
<div ai-outter data="name"><div ai-middle data="data"><div ai-inner data="data">似乎只选择了最外面的指令.我需要做什么才能使用这种继承模式以及使用嵌入标记填充最内部的指令?
Plunker:http://plnkr.co/edit/HvaJKmGH2agEOKHGrZvV
编辑说明
我按照 PascalPrecht 的建议编辑了我的标记 a(更新的 plunker 在这里:http://plnkr.co/编辑/HvaJKmGH2agEOKHGrZvV )
<div ai-outter data="name" ng-transclude><div ai-middle data="name" ng-transclude><div ai-inner data="name" ng-transclude><h1>你好，{{name}}<button ng-click="name = 'bob'">点击我</button>但是，我认为我遇到了范围界定问题.当我按下按钮时，{{name}} 模型应该一直绑定回来，不是吗?目前，只有最内部的范围正在更新.
我想我对指令的范围界定感到困惑.
解决方案您不能使用原始值，您应该从作用域的控制器中引用一个对象.
查看代码的修改版本:http://plnkr.co/edit/666Adad72zRJIasOzurs?p=preview
并且一定要看看这个优秀的答案:范围原型/原型继承的细微差别是什么在 AngularJS 中?
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.
解决方案You can't use a primitive value and you should reference an object from your scope's controller.
See a modified version of your code: http://plnkr.co/edit/666Adad72zRJIasOzurs?p=preview
And be sure to check out this excellent answer: What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
这篇关于角度指令嵌入和继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
更多推荐
[db:关键词]
发布评论