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 相关文章推荐
jQuery 1.0.2
Oct 11 Javascript
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
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调用dll的实例操作动画与代码分享
2012/08/14 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
一些mootools的学习资源
2010/02/07 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
js模拟微博发布消息
2017/02/23 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
大学生标准推荐信范文
2013/11/25 职场文书
个人自荐信
2013/12/05 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
高二化学教学反思
2016/02/22 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
Pandas搭配lambda组合使用详解
2022/01/22 Python