首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

总结

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

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

- Author -

dreamapplehappy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript this关键字使用分析
Oct 21 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
React服务端渲染（总结）
Jul 01 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
vue 实现LED数字时钟效果（开箱即用）
Dec 08 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
ant-design-vue按需加载的坑的解决
May 14 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
InputStream(1) OutputStream(1) 高动态范围(1) vuex(1) persistedstate(1) Vue3(1) axios(1) 连接器(1) 曝光融合(1) HDR(1)
You might like
PHP4 与 MySQL 交互使用
2006/10/09 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
JavaScript将取代AppleScript？
2014/09/18 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
纯JS实现轮播图
2017/02/22 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
python调用shell的方法
2013/11/20 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
想学python 这5本书籍你必看！
2018/12/11 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
详解Django admin高级用法
2019/11/06 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
高考考python编程是真的吗
2020/07/20 Python
详解Python IO编程
2020/07/24 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
比较基础的php面试题及答案-填空题
2014/04/26 面试题
求∏的近似值，直到最后一项的绝对值小于指定的数
2016/02/12 面试题
机电一体化专业应届本科生求职信
2013/09/27 职场文书
个人实用简单的自我评价
2013/10/19 职场文书
市场营销毕业生自荐信
2013/11/23 职场文书
工作证明格式范文
2015/06/15 职场文书
青年联谊会致辞
2015/07/31 职场文书
执行力心得体会范文
2016/01/11 职场文书
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL