前言

AngularJS中指令的重要性是不言而喻的,指令让我们可以创建自己的HTML标记,它将自定义元素变成了一个一个的模块,极大的体现了前端开发中的模块化模式,并提高了代码的易读性和重用性。AngularJS中的指令也是学习AngularJS中的一个难点所在,其中的许多属性,需要反复学习,认真体会,方能领悟其中的精妙之处。

今天我们要讲的就是其中一个重点和难点 – transclusion。关于这个话题我之前也写过很多文章来讲述,但是当时都是照搬博文中的例子,自己也没有比较深刻的体会,因此一直不得要领。今天我们的目标就是“彻底弄懂transclusion”。

一、什么是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>

都说的这么详细了,不要再说你不会了哈!!!

二、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> 

例子这么清楚,总能明白了吧!!

三、不使用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彻底的清楚明白了吧。要是不明白,再看几遍,总会明白的!!!

总结

以上就是这篇文章的全部内容了,希望本文的内容对各位Android开发者们能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对Devmax的支持。

彻底学会Angular.js中的transclusion的更多相关文章

  1. Angular.js项目中使用gulp实现自动化构建以及压缩打包详解

    基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中。下面这篇文章主要给大家介绍了关于在Angular.js项目中使用gulp实现自动化构建以及压缩打包的相关资料,需要的朋友可以参考下。

  2. 使用Angular.js开发的注意事项

    这篇文章主要记录了一些在学习和使用angular.js踩到的坑和需要注意的点,方便以后自己查阅,也给同样遇到这些问题的朋友们一些帮助,有需要的朋友们下面来一起看看吧。

  3. 利用Angular+Angular-Ui实现分页(代码加简单)

    这篇文章主要介绍了利用Angular+Angular-Ui实现分页,利用Angular+Angular-Ui实现的分页分页代码更加简单,更加容易懂哦,相信本文的内容对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。

  4. 利用Angular.js编写公共提示模块的方法教程

    最近工作中会经常遇到一些公用提示,使用框架自带很多时候不方便所以便自己编写了一个公共提示模块,下面这篇文章主要介绍了利用Angular.js编写公共提示模块的方法教程,需要的朋友可以参考借鉴,下面来一起看看吧。

  5. Angular.js中定时器循环的3种方法总结

    这篇文章主要给大家总结了angular.js中定时器循环的3种方法,分别是利用$interlval实现、$timeout的递归调用来实现以及$timeout借助arguments.callee来实现,每种方法都给出了详细的示例艾玛供大家学习参考,需要的朋友们下面跟着小编一起来学习学习吧。

  6. 如何在Angular.JS中接收并下载PDF

    最近这两天公司正在做一个PDF协议下载的功能,目前的解决方案可以分为完全前端生成和后端生成两种方式。前端生成PDF有jsPDF 和pdfmake 两种方式,下面这篇文章就给大家分享下如何在Angular.JS中接收并下载PDF的方法,有需要的朋友们可以参考借鉴,下面来一起看看吧。

  7. AngularJs表单验证实例代码解析

    这篇文章主要介绍了AngularJs表单验证实例代码解析,非常不错,具有参考借鉴价值,需要的朋友可以参考下

  8. Angular.JS去掉访问路径URL中的#号详解

    最近天天都在用AngularJS,各类文档也都看过好几遍,但总是些编程上的事找不到优雅的解决办法。今天终于把AngularJS的项目访问路径URL里的#号去掉了,这个问题不见得有多难,关键是花多长时间去理解AngularJS框架本身,下面来看看详细介绍,需要的朋友可以参考下。

  9. Angular.js中控制器之间的传值详解

    angular中每个controller(控制器)都会有自己的$scope,通过为这个对象添加属性赋值,就可以将数据传递给模板进行渲染,每个$scope只会在自己控制器内起作用,而有时候需要用到其他控制器中的数据就要考虑到控制器之间参数的传递了,下面来看看详细的介绍。

  10. Angular.JS内置服务$http对数据库的增删改使用教程

    我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象,下面这篇文章主要给大家介绍了关于Angular.JS内置服务$http对数据库的增删改等操作的相关资料,需要的朋友可以参考下。

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部