angular.js指令中transclude选项及ng-transclude指令怎么用

这篇文章主要为大家展示了“angular.js指令中transclude选项及ng-transclude指令怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“angular.js指令中transclude选项及ng-transclude指令怎么用”这篇文章吧。

创新互联自2013年创立以来，是专业互联网技术服务公司，拥有项目网站建设、成都网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元营山做网站,已为上家服务,为营山各地企业和个人服务,联系电话:13518219792

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

代码的结果可以在这里看到，完整的代码会在后面贴出来。

现在我们来看第一个指令部分

1、在页面中使用的形式



 $AAAAAA $我是指令[one-transclude]元素内部的内容

我们定义了一个名字叫做one-transclude的指令，也就是说这个指令的模板中只有一个嵌入点的，指令内部是有一些元素的我给内部的元素的内容做了一些标记，方便我们后面观察。

2、JavaScript代码部分

angular.module('app', [])
 .directive('oneTransclude', oneTransclude);

function oneTransclude() {
 return {
 restrict: 'AE',
 transclude: true,
 templateUrl: 'one-transclude.html'
 };
}

我们在JavaScript中定义oneTransclude，注意我们这里transclude=true，表明我们希望在模板中将指令的内部元素嵌入到模板中的某个位置。

3、指令的模板部分


 
 $BBBBBB$ 我是指令[one-transclude]模板的内容

angular.module('app', []) .directive('multiTransclude', multiTransclude); function multiTransclude() { return { restrict: 'AE', transclude: { 'title': 'multiTranscludeTitle', 'body': 'multiTranscludeBody', 'footer': '?multiTranscludeFooter' }, templateUrl: 'multi-transclude.html' }; }

指令one-transclude 内部含有元素

$AAAAAA $我是指令[one-transclude]元素内部的内容

指令one-transclude 内部不含有元素

指令mutil-transclude

我是指令元素内部的title

我是指令元素内部的body

我是指令元素内部的footer

大橙子网站建设，新征程启航

angular.js指令中transclude选项及ng-transclude指令怎么用

指令one-transclude 内部含有元素

指令one-transclude 内部不含有元素

指令mutil-transclude

其他资讯