编辑。
就像@Jonah在下面指出的那样,这是一篇关于伪指令的编译选项和使用包含函数的非常好的文章。
基本思想是编译函数应返回链接函数。您可以使用链接功能内部提供的包含功能来获取包含对象的DOM元素的副本,进行编译,然后将其插入需要插入的位置。
这是一个更好的例子,我已经摆脱了对Plunker的支持
编译函数的思想是,您可以在创建和调用链接函数之前,根据传递的属性以编程方式更改DOM元素。
app.directive('keyValueRepeat', function ($compile){
return {
transclude: true,
scope: {
data: '=',
showDebug: '@'
},
compile: function(elem, attrs, transclude) {
if(attrs.showDebug) {
elem.append('<div class="debug">DEBUG ENABLED {{showDebug}}</div>');
}
return function(scope, lElem, lAttrs) {
var items = [];
console.log(lElem);
scope.$watch('data', function(data) {
for(var i = items.length; i-- > 0;) {
items[i].element.remove();
items[i].scope.$destroy();
items.splice(i,1);
}
for(var key in data) {
var val = data[key],
childScope = scope.$new(),
childElement = angular.element('<div></div>');
childScope.key = key;
childScope.value = val;
transclude(childScope, function(clone, innerScope) {
console.log(clone);
if(attrs.showDebug) {
clone.prepend('<span class="debug">{{key}}: {{value}}</span>');
}
childElement.append($compile(clone)(innerScope));
});
items.push({
element: childElement,
scope: childScope
});
lElem.append(childElement);
}
});
};
}
};
});
TypeError: Cannot read property '1' of null
。这是因为您正在将元素传递到transcludeLinkingFn的第一个参数中,并且它需要一个范围。在文档中清楚地说明了transclude - A transclude linking function: function(scope, cloneLinkingFn).
这一点:此类示例不是预期的用例。 本文显示了一个更好的。