素材巴巴 > 程序开发 >

angular指令的transclude选项以及ng-transclude指令

程序开发 2023-09-18 11:51:47

今天我们来研究一下如何使用ng-transclude指令,以及指令的transclude选项;首先要说明我们使用的angular的版本是1.5.0,因为不同版本的表现结果不是那么相同。

首先我们应该了解到,在angular指令的选项中,有一项是transclude,这个选项有三种值:falsetrueobject;那这三种值分别表示什么,该如何选择?下面我们来详细的说明一下。

transclude字面意思就是嵌入,也就是说你需不需要将你的指令内部的元素(注意不是指令的模板)嵌入到你的模板中去,默认是false。如果你需要这种功能的话,那么就需要将transclude设置为true或者{...}。如果将这个值设置为true或者{...}的话,那么就要配合angular的ng-transclude指令来进行使用,好,废话不多说了,看代码是最好的学习方法,我们下面就来根据代码来了解掌握这些东西。

代码的结果可以在这里看到,完整的代码会在后面贴出来,现在我们来看第一个指令部分

多个嵌入点的情况,这时候指令内部的ng-transclude的值是一个对象,一种映射关系;具体的可以看下面的代码:

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

完整的代码部分


标签:

上一篇: Js操作添加class和移除class 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。