angular.js指令中transclude选项及ng-transclude指令详解


Posted in Javascript onMay 24, 2017

前言

在开始本文之前,首先要说明我们使用的angular的版本是1.5.0,因为不同版本的表现结果不是那么相同。

首先我们应该了解到,在angular指令的选项中,有一项是transclude,这个选项有三种值:false,true,object;那这三种值分别表示什么,该如何选择?

下面我们来详细的说明一下。

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

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

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

1、在页面中使用的形式

<!-- 指令one-transclude 内部含有元素-->
<one-transclude class="one-transclude-self">
 <div class="one-transclude-self__footer">$AAAAAA $我是指令[one-transclude]元素内部的内容</div>
</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、指令的模板部分

<div class="one-transclude">
 <div class="one-transclude__title">
 $BBBBBB$ 我是指令[one-transclude]模板的内容
 </div>
 <hr>
 <ng-transclude>
 $CCCCCC$ 我是指令[one-transclude]模板中[ng-transclude]中的内容
 </ng-transclude>
</div>

上面书写了我们的指令模板,可以看到我们的模板由两部分组成,一部分是含有ng-transclude指令的,一部分是不含有这个指令的。当然我也把这些里面的内容作了一些标记,方便后面我们观察。因为这里的ng-transclude后面不带有参数,所以指令里面的元素就是那些以$AAAAAA$开头的整块元素都会嵌入到指令模板中含有ng-transclude指令的内部,还要注意,如果指令模板中含有ng-transclude指令的元素内部也有元素的话,那么这些元素会被替代。还有一种情况,那就是如果指令里面不含有元素,那么指令模板里面的含有ng-transclude指令的元素的内部元素会显示出来

4、我们可以看下图更直观的了解一下。

angular.js指令中transclude选项及ng-transclude指令详解

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

5、指令在页面中使用的代码:

<!-- 指令mutil-transclude -->
<multi-transclude>
 <multi-transclude-title>我是指令元素内部的title</multi-transclude-title>
 <multi-transclude-body>我是指令元素内部的body</multi-transclude-body>
 <multi-transclude-footer>我是指令元素内部的footer</multi-transclude-footer>
</multi-transclude>

我们在页面中使用了multi-transclude这个指令,在指令的内部还有三个指令,这内部的三个指令要以E的形式应用,不然会出现问题,看到这里不明白的没关系,继续往下看。

6、JavaScript代码中的指令:

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

我们的transclude对象定义了如何将多个嵌入点与指令内部的指令嵌入点一一对应,拿'footer': '?multiTranscludeFooter'来解释一下,footer对应指令模板中的一个嵌入点,multiTranscludeFooter对应指令元素内部的哪个multi-transclude-footer指令,前面的?表示这个嵌入点不一定有对应的指令存在。当然multiTranscludeFooter是我们自己定义的,可以随意定义,但是尽量做到让大家一看就知道是对应哪个嵌入点就行。

7、指令对应的模板

<div class="multi-transclude">
 <div class="multi-transclude__title" ng-transclude="title"></div>
 <div>忽略我,我就是证明我是在模板中的1</div>
 <div class="multi-transclude__body" ng-transclude="body"></div>
 <div>忽略我,我就是证明我是在模板中的2</div>
 <div class="multi-transclude__footer" ng-transclude="footer"></div>
</div>

从上面的模板中我们可以看到,指令ng-transclude后面的字符串就是我们定义的嵌入点,也就是上面指令定义时候用到的那些字符串。

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

完整的代码部分

1、index.html

<body ng-controller="MyController as vm">

<h1 ng-bind="vm.title"></h1>

<h2>指令one-transclude 内部含有元素</h2>
<!-- 指令one-transclude 内部含有元素-->
<one-transclude class="one-transclude-self">
 <div class="one-transclude-self__footer">$AAAAAA $我是指令[one-transclude]元素内部的内容</div>
</one-transclude>


<h2>指令one-transclude 内部不含有元素</h2>
<!-- 指令one-transclude 内部不含有元素 -->
<one-transclude class="one-transclude-self"></one-transclude>

<h2>指令mutil-transclude</h2>
<!-- 指令mutil-transclude -->
<multi-transclude>
 <multi-transclude-title>我是指令元素内部的title</multi-transclude-title>
 <multi-transclude-body>我是指令元素内部的body</multi-transclude-body>
 <multi-transclude-footer>我是指令元素内部的footer</multi-transclude-footer>
</multi-transclude>

</body>

2、app.js

(function() {
angular.module('app', [])
 .controller('MyController', myController)
 .directive('oneTransclude', oneTransclude)
 .directive('multiTransclude', multiTransclude);

myController.$inject = [];

function myController() {
 var vm = this;
 vm.title = 'ng-transclude';
}

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

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

3、one-transclude.html

<div class="one-transclude">
 <div class="one-transclude__title">
 $BBBBBB$ 我是指令[one-transclude]模板的内容
 </div>
 <hr>
 <ng-transclude>
 $CCCCCC$ 我是指令[one-transclude]模板中[ng-transclude]中的内容
 </ng-transclude>
</div>

4、multi-transclude.html

<div class="multi-transclude">
 <div class="multi-transclude__title" ng-transclude="title"></div>
 <div>忽略我,我就是证明我是在模板中的1</div>
 <div class="multi-transclude__body" ng-transclude="body"></div>
 <div>忽略我,我就是证明我是在模板中的2</div>
 <div class="multi-transclude__footer" ng-transclude="footer"></div>
</div>

总结

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

Javascript 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
angular directive的简单使用总结
May 24 #Javascript
深入理解JavaScript 参数按值传递
May 24 #Javascript
详解Angular 4.x NgTemplateOutlet
May 24 #Javascript
javascript简单写的判断电话号码实例
May 24 #Javascript
Angular2搜索和重置按钮过场动画
May 24 #Javascript
深入理解react-router@4.0 使用和源码解析
May 23 #Javascript
angularjs中ng-bind-html的用法总结
May 23 #Javascript
You might like
一次编写,随处运行
2006/10/09 PHP
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
use jscript List Installed Software
2007/06/11 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
电话客服工作职责
2014/07/27 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
语文教师个人工作总结
2015/02/06 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers