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 相关文章推荐
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 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
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
PHP计数器的实现代码
2013/06/08 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
python连接mysql调用存储过程示例
2014/03/05 Python
Python中使用ElementTree解析XML示例
2015/06/02 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
农村婚礼证婚词
2014/01/08 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
倡议书格式模板
2014/05/13 职场文书
法律顾问服务方案
2014/05/15 职场文书
员工年终自我评价
2014/09/14 职场文书
详解Python如何批量采集京东商品数据流程
2022/01/22 Python
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技