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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
一个对于Array的简单扩展
Oct 03 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
详解vuex commit保存数据技巧
2018/12/25 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
python实现apahce网站日志分析示例
2014/04/02 Python
Python中__init__和__new__的区别详解
2014/07/09 Python
Python实现线程池代码分享
2015/06/21 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
python怎么判断素数
2020/07/01 Python
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
人力资源部门的主要职能
2014/02/22 职场文书
南极大冒险观后感
2015/06/05 职场文书
实践论读书笔记
2015/06/29 职场文书
学生会招新宣传语
2015/07/13 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python