频道导航

AngularJS中transclude用法详解

2019-01-06 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了AngularJS中transclude用法详解，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例讲述了AngularJS中transclude用法。分享给大家供大家参考，具体如下：

Transclude - 在Angular的指令中，大家会看到有一个这样的一个配置属性，这个单词在英文字典里面也查询不到真实的意思，所以就用英文来标示它吧。如果你深入的使用angular的话，你就花很大一部分时间来创建自定义指令，那么就不可避免的要深入理解transclude。简单的讲，transclude主要完成以下工作，取出自定义指令中的内容(就是写在指令里面的子元素)，以正确的作用域解析它,然后再放回指令模板中标记的位置(通常是ng-transclude标记的地方)，虽然使用内建的ngTransclude对于基本的transclude操作已经足够简单，但是在文档中对这个transclude的解释还是有存在很多疑惑，比如说：

函数中接收到了一个叫transclude的参数是什么东西呢？有什么用呢？

属性的transclude操作

接下来我们将一个个的解释:

基本的transclude

我们通过一个基本的transclude例子来讲解吧，我们现在要创建的是一个叫buttonBar的指令，用户可以通过它来添加一组button到页面上，这个指令会对不同的button进行位置的排列。以下例子css样式是使用Bootstrap框架。

在fiddle中查看例子：http://jsfiddle.net/ospatil/A969Z/157/

JS：

',replace: true,transclude: true }; });

我们先看下HTML标签,buttonBar指令包裹着几个button元素。而button元素也被链接上了基于class的primary指令，不要太在意这个primary指令的功能它只不过为button元素添加一些css的样式而已。现在我们来看buttonBar指令，它提供了一个transclude:true属性，同时在它的模板里面使用ng-transclude指令。在运行的过程中，Angular获取到自定义指令的内容，处理完了之后把结果放到了模板中链接上ng-transclude的div。

transclude到多个位置

现在我们来增强下我们的buttonBar指令的功能，我们增加了两种按钮，primary和secondary,其中primary按钮是排右边，secondary是排左边。所以要做到这个功能，它必须能够取出指令的内容，然后把它们分别添加到不同的div中，一个用来放primary按钮,一个用来放secondary按钮。

这样的话，默认的机制已经满足不了我们的要求，于是我们有了另外一种方法：

链接函数中移除原始的用来transclude操作的元素

这种方法就是先把所有的内容插入到ng-transclude标记的元素中，然后在link函数中再找出元素的插入的元素，重新放到元素的其他地方，最后删除原来暂存内容的元素。

在fiddle中查看例子：http://jsfiddle.net/ospatil/A969Z/158/

JS：

',transclude: true,attrs) { var primaryBlock = element.find('div.primary-block'); var secondaryBlock = element.find('div.secondary-block'); var transcludedBlock = element.find('div.transcluded'); var transcludedButtons = transcludedBlock.children().filter(':button'); angular.forEach(transcludedButtons,function(elem) { if (angular.element(elem).hasClass('primary')) { primaryBlock.append(elem); } else if (angular.element(elem).hasClass('secondary')) { secondaryBlock.append(elem); } }); transcludedBlock.remove(); } }; });

虽然这种方法达到了我们的目的，但是允许默认的transclude操作，然后再人工的从DOM元素中移出不是非常有效率的。因此，我们有了compile函数中的transclude参数和控制器中的$transclude服务

编译函数参数中的transclude

开发者指南中给了我们以下的关于指令中编译函数的形式：

其中关于第三个参数transclude的解释是:

好的，现在我们利用这个函数来实现我们刚才讲到的功能，从而不需要再先暂存内容，然后再插入到其他地方。

在fiddle中查看例子：http://jsfiddle.net/ospatil/A969Z/161/

JS：

',compile: function(elem,attrs,transcludeFn) { return function (scope,attrs) { transcludeFn(scope,function(clone) { var primaryBlock = elem.find('div.primary-block'); var secondaryBlock = elem.find('div.secondary-block'); var transcludedButtons = clone.filter(':button'); angular.forEach(transcludedButtons,function(e) { if (angular.element(e).hasClass('primary')) { primaryBlock.append(e); } else if (angular.element(e).hasClass('secondary')) { secondaryBlock.append(e); } }); }); }; } }; });

注意到，transcludeFn函数需要一个可用的scope作为第一个参数，但是编译函数中没有可用的scope，所以这里需要在链接函数中执行transcludeFn。这种方法实际上是在link函数中同时操作编译后的DOM元素和模板元素(主要是因为transcludeFn函数中保存着指令的内容)。

可在控制器中注入的$transclude服务

在开发者指南中对$transclude服务是这么解释的：

看看如何用在我们的例子中：

在fiddle中查看例子：http://jsfiddle.net/ospatil/A969Z/162/

JS：

同样的意思，$transclude中接收的函数里的参数含有指令元素的内容，而$element包含编译后的DOM元素，所以就可以在控制器中同时操作DOM元素和指令内容，跟上文的compile函数的实现方式有异曲同工之处，这里有几点需要注意，这个控制器应该是指令的控制器，另一个注意到上文除了第一种方法，其他的地方都没有用到ng-transclude，因为无需插入到模板中。

Transclude 和 scope

在开发者指南中提到了a directive isolated scope and transclude scope are siblings,这到底是什么意思呢？假如你认真看前文的例子的话，你就会发现parentController控制器创建了一个作用域，buttonBar指令在parentController下面创建了一个孤立作用域，而根据Angular文档，transclude也创建了另外一个作用域，因此指令的隔离作用域跟transclude作用域是基于同一个父作用域的兄弟作用域。

transclude内容放入元素的属性

实际上，你不可以这么做，但是你可以通过一种变通的方法来实现这种效果

',compile: function compile(tElement,transclude) { return { pre: function(scope) { transclude(scope,function(clone) { scope.transcluded_content = clone[0].textContent; }); } } } } });

这里没有操作DOM元素，只是把元素的文本内容复制给了作用域属性，然后在通过作用域传给属性。

另外要注意的是，这里的clone参数是jquery或angular.element封装的整个模板元素。

希望本文所述对大家AngularJS程序设计有所帮助。

上一篇：AngularJS控制器之间的通信方式详解下一篇：AngularJS验证信息框架的封装插件用

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...

作者：前端之家时间：2021-02-22

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...

作者：前端之家时间：2021-02-22

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提...

作者：前端之家时间：2021-02-22

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...

作者：前端之家时间：2021-02-22

搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图...

作者：前端之家时间：2021-02-22

js判断浏览器是否支持webGL

起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。在各种浏览器上运行...

作者：前端之家时间：2021-02-14

js判断undefined和null

js判断undefined js判断null js判断null和undefined

作者：前端之家时间：2021-02-14

将文字自动转为banner打印形式的工具

http://patorjk.com/software/taag/

作者：前端之家时间：2021-02-14

聊一聊 bootstrap 的轮播图插件

今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...

作者：前端之家时间：2021-02-14

js实现图片无缝循环跑马灯

html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...

作者：前端之家时间：2021-02-14

最新文章