我在数据库中存储了一些项目。每个项目都有一个“类型”。我想使用这种类型根据类型动态插入指令。我的 html 看起来像:
<ul>
<li my-item ng-repeat="item in items"></li>
</ul
在 my-item 指令中，我动态生成一个指令，如下所示:
app.directive('myItem', function($compile){
return {
link: function(scope, el, attrs) {
var concreteTypeEl = $compile('<div my-item-' + scope.item.type + ' item="item"></div>')(scope);
el.append(concreteTypeEl);
}
};
});
然后我有进一步的指令定义“具体”项目类型。例如，类型为“Type1”的项目将使用“myItemType1”指令(如下所示)
所以这一切都很好。现在，我还想要一个父指令来包装这些指令的所有实例，并提供一个 Controller 以允许它们之间的协调。
我在 myItem 指令上使用 require ^parentCtrl 语法来访问父 Controller 。
我的问题是，这不适用于任何“动态”插入的指令，例如“myItemType1”
下面和本 plunkr 中的完整示例。标记:
<body ng-controller="MainCtrl">
<div my-container>
<ul>
<li my-item ng-repeat="item in items"></li>
</ul>
</div>
</body>
代码:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [{
type: 'type1',
content: 'Type 1 item'
}, {
type: 'type1',
content: 'Another Type 1 item'
}];
});
app.directive('myContainer', function(){
return {
controller: function() {
this.doSomething = function() {
return 'foo';
}
}
};
});
app.directive('myItem', function($compile){
return {
require: '^myContainer',
link: function(scope, el, attrs, myContainer) {
// 'myContainer' is a reference to parent controller
console.log('Ctrl in myItem:', myContainer);
var concreteTypeEl = $compile('<div my-item-' + scope.item.type + ' item="item"></div>')(scope);
el.append(concreteTypeEl);
}
};
});
app.directive('myItemType1', function($compile){
return {
require: '?^myContainer',
link: function(scope, el, attrs, myContainer) {
// PROBLEM: 'myContainer' is undefined here
console.log('Ctrl in myItemType1:', myContainer);
el.append(scope.item.content);
}
};
});
我的做法是错误的吗？
最佳答案
在手动编译和链接元素之前，您应该将元素附加到 DOM 树:
link:function(scope,element,attr) {
// create the element
var e = angular.element('<my-child></my-child>');
//append it to the DOM
element.append(e);
// compile and link
$compile(e)(scope);
}
关于angularjs - 在动态生成的 AngularJS 指令中访问父 Controller ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24967688/