彻底弄懂AngularJS中的transclusion
彻底弄懂AngularJS中的transclusion
AngularJS中指令的重要性是不言而喻的,指令让我们可以创建自己的HTML标记,它将自定义元素变成了一个一个的模块,极大的体现了前端开发中的模块化模式,并提高了代码的易读性和重用性。AngularJS中的指令也是学习AngularJS中的一个难点所在,其中的许多属性,需要反复学习,认真体会,方能领悟其中的精妙之处。
今天我们要讲的就是其中一个重点和难点 – transclusion。关于这个话题我之前也写过很多文章来讲述,但是当时都是照搬博文中的例子,自己也没有比较深刻的体会,因此一直不得要领。今天我们的目标就是“彻底弄懂transclusion”。
1.什么是transclusion
好吧,我知道你肯定会去查词典,但是你会发现,词典上没有transclusion这个词的准确释义!!!纳尼!!!这不坑爹的吗!!!!
还好,维基百科上有一个注释,翻译过来意思大概是这样的:
transclusion在计算机科学中指的是讲一个文档或者一个文档的某部分在另一个文档中引用。
我去,这不坑爹的吗!!!什么意思!!!!
确实,你猜对了,这个解释对我们一点帮助都没有!!!!!!
还好,我们终于在某道词典找到了一个解释:“嵌入”,这里指的是transclusion这个词,而在后面我们即将看到的transclude这个词压根在词典上就找不到。算了,淡定一点,继续往下看。其实这里翻译为“嵌入”,如果从实际运用中来看,还是比较贴切的。如果你不太理解什么是transclusion,我们下面用一个例子来说明一下。
ok,现在我们要创建一个指令了,我们把这个指令叫做<handsome-me>。在此先略过这个指令的创建过程,如果你还不知道怎样创建一个指令,请前参看前面几篇文章。好了,无论怎么说,这个指令已经创建好了,于是我们可以有以下几种用法:
第一种:
<handsome-me/>
就像是input一样对吧,很简单,我们叫它“自开自闭”(要是你在别的书上没看过这个名称,那就是我发明的,反正就这么叫)标签。
第二种:
<handsome-me></handsome-me>
就像是div一样对吧,更简单,我们叫它“自开别人闭”(同上同上)标签。
第三种:
<handsome-me>
//中间有好多代码
</handsome-me>
这个和第二种很像吧,但是又有点区别,我们叫它“自开别人闭,中间加一坨”(总是感觉好粗俗。。。never mind。。。)标签。
我们来对比以下三种标签,它们有什么区别。当然区别很多。但是具体到我们今天的话题,与之相关的最大的区别就是前两种中间没有加一坨,第三种中间加了一坨。OK,因此我们现在来总结什么叫做transclusion:
如果你在定义指令的时候,想要它在具体使用时中间加一坨,那么你就要用transclusion。
这个定义实在是太经典了,完全比什么官方文档要清楚有没有,完爆各种老外唧唧歪歪说半天还是不明白有没有,完全符合中国国情有没有!!!
好了,知道了定义以后,我们要开始来看看具体怎么使用transclusion了。如果你了解AngularJS指令的编写,你一定知道return的那个对象的tranclude指令默认是false,因此如果你想要开启使用transclusion的话,就要将这个transclude属性赋上一个别的值,当然,这个值不能乱赋,它只有两种选择:
第一种选择:
transclude: true
第二种选择:
transclude: 'element'
我去,这个又是毛线啊!两者之间有毛的区别啊!!文档完全是看不懂的嘛!!!
淡定一点,现在我们来说区别。最常用的呢,是第一种,也就是赋值为true。还记得transclusion的中文意思吗,“嵌入”对吧!因此我们现在就不说“一坨”,而把中间的这一坨叫做“嵌入部分”。ok,回到正题,当transclude是true的时候,嵌入部分就是嵌入部分,比如说:
<handsome-me>
{{name}}
<handsome-me>
在transclude:true的时候,它的嵌入部分是什么啊?对了,就是{{name}}。再来一发:
<handsome-me>
<div>
<span>{{name}}</span>
</div>
<handsome-me>
在transclude:true的时候,它的嵌入部分是什么啊?对了,是
<div>
<span>{{name}}</span>
</div>
太简单了是吧!so easy!妈妈再也不用担心我的学习!!!
现在再来讲第二种情况,当transclude的值是element的时候,又是怎样一种情形。此时,嵌入部分变成了原来的嵌入部分加上外边的自定义标签,也就是整个元素。又听不懂了!!!fork fork fork!!!!!!淡定,我们再来举例子:
<handsome-me>
{{name}}
<handsome-me>
在transclude:’element’的时候它的嵌入部分是什么啊?对了,是:
<handsome-me>
{{name}}
<handsome-me>
再来一发:
<handsome-me>
<div>
<span>{{name}}</span>
</div>
<handsome-me>
在transclude:’element’的时候它的嵌入部分是什么啊?对了,是:
<handsome-me>
<div>
<span>{{name}}</span>
</div>
<handsome-me>
都说的这么详细了,不要再说你不会了哈!!!
2.ng-transclude的作用是什么
在编写指令时,我们都会有一个template或者templateUrl这样的属性是吧。在使用transclusion时,我们要把嵌入部分放到模板中,因此我们有两种选择,其中一种选择就是使用ng-transclude。
ng-transclude是干什么用的,我们还是先来看定义,再来看例子:
ng-tranclude决定了在什么地方放置嵌入部分。
太好理解了!于是我们来看例子:
假设指令是这样的:
<handsome-me>
{{name}}
</handsome-me>
而模板是这样的:
<div>
<p>MaMa does not need to worry about my study anymore! </p>
<div ng-transclude></div>
</div>
于是,在transclude:true的情况下,最终呈现在页面中的HTML会是什么样子。对了,是这样:
<div>
<p>MaMa does not need to worry about my study anymore! </p>
{{name}}
</div>
另一种情况,在transclude:’element’的情况下,最终呈现在页面中的HTML会是什么样子。对了,是这样:
<div>
<p>MaMa does not need to worry about my study anymore! </p>
<handsome-me>
{{name}}
</handsome-me>
</div>
例子这么清楚,总能明白了吧!!
3.不使用ng-transclude的情形
OK,现在我们来想一个问题,如果我想把我的嵌入部分多次放入我的模板中怎么办?你可能会说,那就多放几个ng-transclude呗!这当然是不行的,在AngularJS中你只在一个指令的模板中只能申明一个ng-tranclude。所以这种情况下我们就能使用模板了,因此我们要使用一个叫做tranclude()的函数!!
纳尼!这又是什么东西!!!如果你仔细去研究一下AngularJS的文档的话,你一定会发现一个叫做$tranclude的service,它就是我们现在要将讲的东西。那么这个函数怎么用?如果你看过一些关于ng-repeat,ng-swift源码的解析,你一定会记得其中的一个叫做linker的东西。这个东西上是什么曾经困扰过我好长时间,但是后来我发现这个linker()其实就是transclude()。
我们在link,compile以及controller中都能找到这个transclude函数的身影。在link函数中,transclude是link函数的第五个参数;在compile函数中,transclude是compile函数的第三个参数。在这个两个函数中,由于我们没有使用依赖注入,因此只要顺序对了就对了,随便命名为什么都可以。而在controller函数中,由于使用的是依赖注入,因此transclude是$transclude,只要名字写对了就对了。在link,compile和controller函数中,transclude的用法一模一样,因此在这我们只举一个link函数的例子:
1.最简单的用法:
link(scope,elem,attrs,ctrl,transclude){
var content = transclude();
elem.append(content);
}
在这里,我们通过transclude()返回了嵌入部分的具体内容,然后append到了元素的elem的尾巴上,当然,你想要append多次也是可以的。
2.复杂一点的用法:
link(scope,elem,attrs,ctrl,transclude){
tranclude(scope,function(clone){
elem.append(clone);
})
}
这里tranclude接受了两个参数,第一个是scope,代表作用域。第二个回调函数中带有一个参数clone,其实它就是嵌入内容,和transclude()的返回值一模一样。那么前面的第一个参数的scope有什么用呢?这就要说到transclude和作用域了!
4.transclude和scope
我们知道,在定义一个指令时,如果不显式声明scope,那么指令的作用域就是父作用域。如果声明scope:true或者scope:{},那么指令会生成一个自己的作用域,只不过一个原型继承,一个独立而已。如果你使用transclusion,那么无论什么情绪,都会生成一个新的作用域,这个作用域直接原型继承于父作用域,它的地位和指令生成的作用域是一样的,二者属于并列的关系。
于是我们现在就能了解tranclude(scope,function(clone){})中的scope是什么意思了,默认情况下,如果我们简单使用translude(),那么作用域默认的是transclude生成的自作用域。但是如果我们使用tranclude(scope,function(clone){}),那么作用域显然就是directive的作用域了。要是我们想使用父作用域怎么办,很简单:
tranclude(scope.$parent,function(clone){})
要是想要一个新的作用域怎么办,也很简单:
tranclude(scope.$parent.$new(),function(clone){})
你要是文作用域是什么东西,作用域是怎么继承的,那不是今天我们要讲的话题。
说了这么多,这么直白,想必你已经对AngularJS的transclusion彻底的清楚明白了吧。要是不明白,再看几遍,总会明白的!!!
彻底弄懂AngularJS中的transclusion的更多相关文章
- AngularJS中的transclusion案例
AngularJS中的transclusion类似于包含关系. 通常,这样定义一个directive: <mydirective someprop=""></my ...
- 一文弄懂神经网络中的反向传播法——BackPropagation【转】
本文转载自:https://www.cnblogs.com/charlotte77/p/5629865.html 一文弄懂神经网络中的反向传播法——BackPropagation 最近在看深度学习 ...
- 【转】彻底弄懂Java中的equals()方法以及与"=="的区别
彻底弄懂Java中的equals()方法以及与"=="的区别 一.问题描述:今天在用Java实现需求的时候,发现equals()和“==”的功能傻傻分不清,导致结果产生巨大的偏差. ...
- 【TensorFlow】一文弄懂CNN中的padding参数
在深度学习的图像识别领域中,我们经常使用卷积神经网络CNN来对图像进行特征提取,当我们使用TensorFlow搭建自己的CNN时,一般会使用TensorFlow中的卷积函数和池化函数来对图像进行卷积和 ...
- 一步一步弄懂angularJS基础
问题1:ng-app指令的使用以及自定义指令 <!doctype html> <!--这里的ng-app的属性值就是模块的名称,也就是 angular.module("My ...
- JavaScript中的this详解(彻底弄懂js中的this用法)!
要想学好js,那么其中那些特别令人混淆迷惑的知识点,就一定要弄清楚.this关键字就是其中让初学者比较迷惑的知识点之一,不过灵活运用this可以提升代码的性能和复用性,那么今天我就和大家一起来了解th ...
- 一文弄懂神经网络中的反向传播法——BackPropagation
最近在看深度学习的东西,一开始看的吴恩达的UFLDL教程,有中文版就直接看了,后来发现有些地方总是不是很明确,又去看英文版,然后又找了些资料看,才发现,中文版的译者在翻译的时候会对省略的公式推导过程进 ...
- 彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...
- 彻底弄懂css中单位px和em,rem的区别 转的自己看
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
随机推荐
- Spring中的AOP开发
1.代理模式 找个人将你原本想做的事情给做了. 三个部分组成: 抽象主题角色:真实主题和代理主题的共同接口. 真实主题角色:定义了代理角色所代表的真实对象. 代理主题角色:含有对真实主题角色的引用.代 ...
- LaTeX的图片插入及排版
LaTeX中一般只直接支持插入eps(Encapsulated PostScript)格式的图形文件, 因此在图片插入latex文档之前应先设法得到图片的eps格式的文件. UNIX下的各种应用软件都 ...
- 数据库-MYSQL安装配置和删除
* 课程回顾: * 完成注册和登陆的功能. * 准备的工作 * 技术.开源jar包 * 开发的功能使用MVC模式 * C:控制层(接收请求和从客户端发送过来的参数) * 接收参数(request对象) ...
- # hadoop入门第六篇:Hive实例
前言 前面已经讲了如何部署在hadoop集群上部署hive,现在我们就做一个很小的实例去熟悉HIVE QL.使用的数据是视频播放数据包括视频编码,播放设备编码,用户账号编码等,我们在这个数据基础上 ...
- 【实验吧】逆向rev50
a simple reverse view 解题链接: http://ctf5.shiyanbar.com/reverse/rev50/rev50 看了别人写的wp得知是挂载参数执行. 补充:gdb挂 ...
- JSP编译指令与动作指令
下面这个面试经常问到,要理解. 上面这个效果一样,重点. <jsp:include>动作在请求期间被执行,而include指令在编译期页面间被执行.
- jQuery遍历-祖先
祖先是父.祖父或曾祖父等等. 通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先. 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() ...
- 快速排序/快速查找(第k个, 前k个问题)
//快速排序:Partition分割函数,三数中值分割 bool g_bInvalidInput = false; int median3(int* data, int start, int end) ...
- ROS学习记录(二)————使用smartcar进行仿真(用.xacro文件来运行rviz)
我发现一个学习ROS系统的好网站: 创客智造http://www.ncnynl.com/ 这里面关于ROS的各个方面都有很详细的介绍. 这周,不,上周我对整个ROS是绝望的,我用一个一个下午的时间在敲 ...
- CGI + FastCGI(PHP-FPM)联系和区别的图解 + 注释
一.背景 参考了几篇文章,总结成图解 + 注释方便以后查阅. 参考资料: 1.https://www.zhihu.com/question/19582041 2.https://segmentfaul ...