前言
在开始本文之前,首先要说明我们使用的angular的版本是1.5.0,因为不同版本的表现结果不是那么相同。
首先我们应该了解到,在angular指令的选项中,有一项是transclude,这个选项有三种值:false,true,object;那这三种值分别表示什么,该如何选择?
下面我们来详细的说明一下。
transclude字面意思就是嵌入,也就是说你需不需要将你的指令内部的元素(注意不是指令的模板)嵌入到你的模板中去,默认是false。如果你需要这种功能的话,那么就需要将transclude设置为true或者{...}。如果将这个值设置为true或者{...}的话,那么就要配合angular的ng-transclude指令来进行使用,好,废话不多说了,看代码是最好的学习方法,我们下面就来根据代码来了解掌握这些东西。
代码的结果可以在看到,完整的代码会在后面贴出来。
现在我们来看第一个指令部分
1、在页面中使用的形式
我们定义了一个名字叫做one-transclude的指令,也就是说这个指令的模板中只有一个嵌入点的,指令内部是有一些元素的我给内部的元素的内容做了一些标记,方便我们后面观察。
2、JavaScript代码部分
function oneTransclude() {
return {
restrict: 'AE',transclude: true,templateUrl: 'one-transclude.html'
};
}
我们在JavaScript中定义oneTransclude,注意我们这里transclude=true
,表明我们希望在模板中将指令的内部元素嵌入到模板中的某个位置。
3、指令的模板部分
$CCCCCC$ 我是指令[one-transclude]模板中[ng-transclude]中的内容
上面书写了我们的指令模板,可以看到我们的模板由两部分组成,一部分是含有ng-transclude指令的,一部分是不含有这个指令的。当然我也把这些里面的内容作了一些标记,方便后面我们观察。因为这里的ng-transclude后面不带有参数,所以指令里面的元素就是那些以$AAAAAA$开头的整块元素都会嵌入到指令模板中含有ng-transclude指令的内部,还要注意,如果指令模板中含有ng-transclude指令的元素内部也有元素的话,那么这些元素会被替代。还有一种情况,那就是如果指令里面不含有元素,那么指令模板里面的含有ng-transclude指令的元素的内部元素会显示出来
我们在页面中使用了multi-transclude这个指令,在指令的内部还有三个指令,这内部的三个指令要以E的形式应用,不然会出现问题,看到这里不明白的没关系,继续往下看。
忽略我,我就是证明我是在模板中的1
从上面的模板中我们可以看到,指令ng-transclude后面的字符串就是我们定义的嵌入点,也就是上面指令定义时候用到的那些字符串。
到这里关于ng-transclude以及angular指令的transclude选项我想大家应该都明白了。
完整的代码部分
1、index.html
<h1 ng-bind="vm.title">
指令one-transclude 内部含有元素
指令one-transclude 内部不含有元素
指令mutil-transclude
我是指令元素内部的title
我是指令元素内部的body
我是指令元素内部的footer