angularJs关于指令的一些冷门属性详解

我们使用尼日利亚的时候，经常会使用到指令，大家所熟知的属性我在这里就不介绍了，讲讲大家没怎么留意的属性

1 .多元

这是指定指令作用区间的功能，最常用的就是ng-重复-开始和尼日利亚重复结束了。

2 .优先权

指令优先级，优先级越高，指令越早执行。

3 .终端

是否允许优先级低的指令起作用，如果是没错，那么只有比当前指令或跟当前指令等级相同的指令才可以执行。最典型的就是ngIf

4.templateNamespace

声明模板的格式有三种选择svg、html、数学

5.transclude

或许有人疑问了，transclude也算是冷门属性吗？其实大家对transclude了解并没有想象的那么深，transclude是一个挺复杂的属性，一般大家会用到的也仅仅是真的，假的。这两个属性我在这里就不讲了，在这里我主要讲的是transclude:element，我谷歌了一整天都没找到正确描述这个属性的方法。我觉得谷歌出来的答案太文档化了。最后在研究$transclude才看出来这个属性的功能究竟在哪里。再讲功能前我们先了解下$transclude

无论在指令的编制还是环时期我们的最后一个参数就是$transclude了，这里其实我们看看源码是如何定义的，我看的源码是ng1.5.3的

函数controllersBoundTransclude(作用域，cloneAttachFn，futureParentElement，slot name){ var trans clude controller；//没有作用域传入： if(！isScope(scope)){ slot name=futurepartrentelement；futurepartrentelement=cloneAttachFn；cloneAttachFn=作用域；范围=未定义；} if(haselementtranscludedictive){ transclude controller=元素控制器；} if(！futurepartrentelement){ futurepartrentelement=hasElementTranscludeDirective？$元素。parent(): $元素；} if(插槽名称){//slotTranscludeFn可以是以下三种情况之一：/*变速器离合器函数-已填充的插槽//* `null` -未填充的可选插槽//* `undefined` -未声明（即无效)的插槽var slotTranscludeFn=boundTranscludeFn .$ $ slot[slot name]；if(slotTranscludeFn){ return slotTranscludeFn(作用域，cloneAttachFn，transcludeControllers，futureParentElement，scope to child)；} else if(isUndefined(slotTranscludeFn)){ throw $ compileminer(' No slot '，'没有需要插槽名为"{0}"的翻译结论的父指令、“Element: {1}”、slotName、起始标记($ element))；} } else { return boundTranscludeFn(作用域，cloneAttachFn，transcludeControllers，futureParentElement，scope to child)；} }还有一个另一个函数要特别指出来，就是最后返回的boundTranscludeFn这个方法，下面是他的源码

函数createBoundTranscludeFn(作用域，TranscludeFn，previousBoundTranscludeFn){ 0函数boundTranscludeFn(transcludesscope，cloneFn，controllers，futureParentElement，containingScope) { if(！trans clud scope){ trans clud scope=作用域$new(false，包含范围)；transcludedScope .$ $ transcluded=true}返回transclude fn(transclude scope，cloneFn，{ parent boundtransclude fn : previousboundtransclude fn，transcludeControllers:控制器，futurepartrentelement : futurepartrentelement })；}这两个方法到底是在做什么呢？其实就是克隆了当前指令的节点，并生成子作用域。克隆的节点由transclude定义，如果你的属性是没错，则克隆的是指令模板中的ng-transclude所在的数字正射影像图节点，及其子节点。如果属性是元素则克隆整个模板的节点。

这是两个指令的代码

angular.module('MyApp '，[])。指令(' dropPanel '，function(){ return { trans clude : ' element '，replace: true，template : ' div class=' drop-panel ' ' ' span ng-trans clude class=' 111 '/span ' '/div '，link: function(scope，el，c，d，$ trans clude){ $ trans clude(function ngregeattranclude(clone，scope){ console . log(clone)；}) } } }) .指令(' dropPanel2 '，function(){ return { trans clude : true，replace: true，template : ' div class=' drop-panel ' ' ' span ng-trans clude class=' 111 '/span ' '/div '，link: function(scope，el，c，d，$ trans clude){ $ trans clude(function ngregepattranclude(clone，scope){ console . log(clone)；})}})如果觉得replace干扰了对结果的理解，可以注释掉，然后看看控制台里打印的克隆，这样就可以知道声明为element的所谓transclude属性的作用了。我们打开replace来更清楚地看到DOM节点并得到结论。下面是编译后的DOM节点之间的区别。

看完上图，可以清楚的分辨出它们在克隆DOM上的不同。此外，如果将属性声明为“元素”，则需要在呈现之前将replace声明为true。我查了很多数据，最后通过使用断点得出了我认为是对的结论。断点跟踪的结果是，如果没有声明replace，似乎不会执行ngTransclude的指令。这让我很奇怪，正因为如此，渲染失败了。第二，归根结底，两个操作的DOM元素是不同的。将transclude声明为元素时，replace为true，得到的DOM节点是带有transclude属性的节点(子节点)，但如果为false，则得不到带有transclude属性的节点(父节点)，ng本身也不遍历其节点，导致执行ng transclude指令失败

我看到了一个很好的观点，大致意思是：由于功能上的考虑，在使用element属性时，它通常充当占位符，克隆函数只会在需要添加DOM时使用。

我觉得这个观点不错。我读了很多关于ngrepeat的介绍。很多文章说ngrepeat的源代码是通过$scope生成的。$new()，这实际上并不完全正确。他确实通过$scope生成了子范围。$new，但是这个生成函数被交给了$transclude函数。事实上，ngrepeat的源代码是通过$transclude生成的。与上述观点有相似之处。

以上是安古拉杰关于边肖带来的指令的一些冷门属性的详细解释。希望大家多多支持我们~