Angularjs 您对transclude函数和clone链接函数的具体操作是什么?

Angularjs 您对transclude函数和clone链接函数的具体操作是什么?,angularjs,Angularjs,从中,我看到compile函数有3个参数,其中一个是transclude。文档提供的唯一解释是: transclude-一个transclude链接函数:函数(scope,cloneLinkingFn) 我想知道你在克隆链接功能中到底要做什么。我甚至不知道传递给它的参数是什么。我发现它有一个名为clone的参数,似乎是一个HTML元素。是否有其他可用参数?这到底是哪个HTML元素?我还考虑在指令中可能使用transclude:'element'。当使用'element'而不是true时,这些问题

从中,我看到compile函数有3个参数,其中一个是
transclude
。文档提供的唯一解释是:

transclude-一个transclude链接函数:函数(scope,cloneLinkingFn)

我想知道你在克隆链接功能中到底要做什么。我甚至不知道传递给它的参数是什么。我发现它有一个名为
clone
的参数,似乎是一个HTML元素。是否有其他可用参数?这到底是哪个HTML元素?我还考虑在指令中可能使用
transclude:'element'
。当使用
'element'
而不是
true
时,这些问题的答案是否会改变


我用简单的例子来理解转换,但我似乎找不到更复杂的例子,尤其是
transclude:'element'
。我希望有人能对这一切做出更彻底的解释。谢谢。

编辑:完全彻底地更改我的答案,并将其标记为“社区维基”(对我来说没有任何分数),因为我回答这个问题时完全错了

正如@Jonah在下面指出的

基本思想是编译函数应该返回一个链接函数。您可以使用linking函数中提供的transclusion函数来获取转置DOM元素的克隆,编译它,并将其插入需要插入的任何位置

compile函数的思想是,它使您有机会根据创建和调用链接函数之前传递的属性以编程方式更改DOM元素

//重复dictionary对象项的愚蠢指令。
应用程序指令('keyValueRepeat',函数($compile){
返回{
是的,
范围:{
数据:'=',
showDebug:“@”
},
编译:函数(elem、attrs、transclude){
如果(attrs.showDebug){
append('DEBUG ENABLED{{{showDebug}}');
}
返回函数(范围、lElem、lAttrs){
var项目=[];
控制台日志(lElem);
范围$watch('数据'),功能(数据){
//从跟踪数组中删除旧值
//(见下文)
对于(变量i=items.length;i-->0;){
items[i].element.remove();
项目[i]。范围$destroy();
项目.拼接(i,1);
}
//添加新的
for(var输入数据){
var val=数据[键],
childScope=scope.$new(),
childElement=角度元素(“”);
//对于中继器中的每个项目,我们将创建
//拥有作用域并在其上设置键和值属性。
childScope.key=key;
childScope.value=val;
//进行转换。
转移(子范围,函数(克隆,内部范围){
//克隆是转包的DOM元素内容的副本。
console.log(克隆);
//因为我们仍然在指令的编译函数中,
//我们可以更改每个输出项的内容
//基于传递的属性。
如果(attrs.showDebug){
clone.prepend({{key}}:{{{value}');
}
//附加被转移的元素。
append($compile(clone)(innerScope));
});
//将生成的对象添加到跟踪阵列。
//因此,我们可以在以后需要更新时删除它们。
推({
元素:childElement,
范围:儿童镜
});
lElem.append(childElement);
}
});
};
}
};
});

@blesh,我很确定这个答案是错的。如果打开控制台并运行plnk,您将看到以下错误:
TypeError:无法读取null的属性“1”
。这是因为您正在将一个元素传递到TranscludeKingFn的第一个参数中,它需要一个作用域。文档中明确说明了这一点:
transclude-一个transclude链接函数:函数(作用域,克隆链接fn)。
类似的示例不是预期的用例。显示了一个更好的。@Jonah:你是1000%正确。我的回答完全错了。这是很久以前的事了,我学到了很多。不管怎样,我已经完全改变了答案,并将其设置为社区维基(不得分)。@blesh,我很高兴看到SO的一些成员比小我更关心把事情做好。谢谢更新!举手之劳想到有人发现了这一点,并且学会了用错误的方式做事,我更感到羞愧!只为其他来找的人提供一些有趣的新事物<代码>注意:传递给编译函数的transclude函数是不可预测的,因为它不知道正确的外部作用域。请改用传递给链接函数的transclude函数。这是因为它的作用域已预先绑定。