序

在开始这篇文章之前，我们应该先解释一下，我们使用的角度版本是1.5.0，因为不同版本的性能结果是不一样的。

首先要知道角度指令的选项之一是transclude，它有三个值：假、真、对象；这三种价值观代表什么，如何选择？

下面我们来详细解释一下。

Transclude字面意思是嵌入，这意味着您是否需要将指令内部的元素(注意，它不是指令的模板)嵌入到您的模板中。默认值为假。如果需要此功能，需要将transclude设置为true或{.}.如果该值设置为真或{.}，它应该与angular ng-transclude指令结合使用。好了，我们别废话了。看代码是最好的学习方法。让我们按照代码来理解和掌握这些东西。

代码的结果可以在这里看到，完整的代码稍后会发布。

现在让我们看看第一个说明部分

1、页面中使用的表单

！-指令one-transclude里面包含元素-one-transclude class=' one-trans clude-self ' Div class=' one-trans clude-self _ _ footer ' $ AAA $我是指令里面的内容[one-trans clude]element/Div/one-trans clude我们定义了一个名为one-trans clude的指令，意思是这个指令的模板里面只有一个嵌入点，指令里面有一些元素。我标记了内部元素的内容，供我们以后观察。

2.JavaScript代码部分

angular.module('app '，[])。指令(' oneTransclude '，oneTransclude)；函数oneTransclude(){ return { restrict : ' AE '，transclude: true，Templateurls : ' one-transclude . html ' }；}我们在JavaScript中定义了oneTransclude，注意这里的transclude=true表示我们希望将指令的内部元素嵌入到模板中的某个位置。

3.指令的模板部分

div class=' one-trans clude ' div class=' one-trans clude _ _ title ' $ bbbbbb $我是指令的内容[one-transclude]模板//div hr ng-transclude $CCCCCC$ $我是指令[one-transclude]我们的指令模板写在模板中的内容/ng-transclude/div中。您可以看到，我们的模板由两部分组成，一部分包含ng-transclude指令，另一部分不包含该指令。当然，我也把这些内容做了标记，供我们以后观察。因为这里ng-transclude后没有参数，所以指令中的元素，也就是以$ AAA $开头的整个元素，会被嵌入到包含ng-transclude指令的指令模板中。请注意，如果指令模板中包含ng-transclude指令的元素内有元素，这些元素将被替换。在另一种情况下，如果指令不包含元素，将显示指令模板中包含ng-transclude指令的元素的内部元素

4.我们可以看看下面的图片，以获得更直观的理解。

在多个嵌入点的情况下，指令内部的ng-transclude的值是一个对象，一个映射关系；具体可以看下面的代码：

5.页面中指令使用的代码：

！-指令多-transclude-multi-transclude多-transclude-title我是指令元素内的title/multi-transclude-title多-trans clude-body/Multi-trans clude-body多-transclude-footer我是指令元素内的footer/Multi-trans clude-footer/Multi-trans clude。我们用的是页面上的multi-transclude指令，指令里面有三个指令，应该以E的形式应用，否则会出现问题。这里不懂也没关系，继续往下看。

6.JavaScript代码中的说明：

angular.module('app '，[]).指令(' multiTransclude '，multi trans clude)；函数multi trans clude(){ return { restrict : ' AE '，trans clude : { ' title ' : ' multi trans clude title '，' body': 'multiTranscludeBody '，' footer': '？multiTranscludeFooter' }，Templateurls : ' multi transclude。html ' }；}我们的transclude对象定义了如何将多个嵌入点与指令内部的指令嵌入点一一对应，拿页脚' : '?'多传输队列分配器'来解释一下，页脚对应指令模板中的一个嵌入点，multiTranscludeFooter对应指令元素内部的哪个多跨包含页脚指令，前面的？表示这个嵌入点不一定有对应的指令存在。当然多转换器是我们自己定义的，可以随意定义，但是尽量做到让大家一看就知道是对应哪个嵌入点就行。

7、指令对应的模板

div class=' multi-trans clude ' div class=' multi-trans clude _ _ title ' ng-trans clude=' title '/div忽略我，我就是证明我是在模板中的1/div class=' multi-trans clude _ _ body ' ng-trans clude=' body '/div忽略我，我就是证明我是在模板中的2/div class=' multi-trans clude _ _ footer ' ng-trans clude=' footer '/div/div从上面的模板中我们可以看到，指令ng-transclude后面的字符串就是我们定义的嵌入点，也就是上面指令定义时候用到的那些字符串。

到这里关于ng-transclude以及有角的指令的transclude选项我想大家应该都明白了。

完整的代码部分

1、index.html

body ng-controller='我的控制器为VM ' h1 ng-bind=' VM。标题'/h1 H2指令单向离合器内部含有元素/h2！-指令单向离合器内部含有元素-one-trans clude class=' one-trans clude-self ' div class=' one-trans clude-self _ _ footer ' $ AAA $我是指令[one-transclude]元素内部的内容/div/one-trans clude 2指令单向离合器内部不含有元素/h2！-指令单向离合器内部不含有元素-单反式离合器class='单反式离合器self '/单反式离合器2指令多跨clude/H2！-指令多转包括多转包括多转包括标题我是指令元素内部的标题/多跨类别标题多跨类别正文我是指令元素内部的正文/多跨内容正文多跨内容页脚我是指令元素内部的页脚/多跨clude-页脚/多跨clude/body2、app.js

(function() {angular.module('app '，[]).控制器("我的控制器",我的控制器)。指令(“一个交易包含”，一个交易包含).指令(' multiTransclude '，multi trans clude)；我的控制器$ inject=[]；函数myController(){ var VM=this；虚拟机。title=" ng-trans clude "；}函数one trans clude(){ return { restrict : ' AE '，transclude: true，Templateurls : ' one-trans clude。html ' }；}函数multi trans clude(){ return { restrict : ' AE '，trans clude : { ' title ' : ' multi trans clude title '，' body': 'multiTranscludeBody '，' footer': '？multiTranscludeFooter' }，Templateurls : ' multi transclude。html ' }；}})();3、one-transclude.html

div class=' one-trans clude ' div class=' one-trans clude _ _ title ' $ BBBBBB $我是指令[one-transclude]模板的内容/div hr ng-transclude $CCCCCC$我是指令[one-transclude]模板中[ng-transclude]中的内容/ng-transclude/div4、multi-transclude.html

div class=' multi-trans clude ' div class=' multi-trans clude _ _ title ' ng-trans clude=' title '/div忽略我，我就是证明我是在模板中的1/div class=' multi-trans clude _ _ body ' ng-trans clude=' body '/div忽略我，我就是证明我是在模板中的2/div class=' multi-trans clude _ _ footer ' ng-trans clude=' footer '/div/div总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。