参考来源：彻底弄懂AngularJS中的transclusion

对以上文章进行摘录、总结和测试记录

在使用指令的时候，如果想要使用指令中的子元素，那么你就要用transclusion。

指令的DDO中，transclude有三个值： transclude: false |true | 'element' ;第一个是默认值，后两个有什么区别呢？

transclude：'element'

//TODO

transclude：true

<body ng-app="app">

<dx>

    这是子元素

</dx>

</body>

<script>

    var app = angular.module('app',[]);

    app.directive('dx',function() {

        return {

            transclude:true,

            template:'<div> 1233  <div ng-transclude></div> </div>'

        }

    });

</script>

运行结果：子元素会被嵌入进 <div ng-transclude></div> 里，而且拥有自己的作用域【后面会讲到这个作用域用来干嘛的】

可以发现，模板中的ng-tranclude决定了在什么地方放置嵌入部分。

以上仅仅只是嵌入了一次，如果我希望多次嵌入，怎么办？

在代码中使用transclude。如下：

link函数的第五个参数、compile函数的第三个参数、依赖注入的$transclude。三者用法一致（前两种用法中要求必须在DDO中打开transclude，如transclude：true，否则获取到的transclude为undefined）。以link为例：

1.执行transclude函数，获取子元素

<body ng-app="app">

<dx>

    这是子元素

</dx>

</body>

<script>

    var app = angular.module('app',[]);

    app.directive('dx',function() {

        return {

            transclude:'true',

            link:function(scope,ele,sttr,ctrl,transclude){

                var sub = transclude();

                for(var i = 0;i<3;i++){

                    ele.append(sub.clone());

                }

            }

        }

    });

运行结果如下，测试过程中发现在for循环运行之前，dx中的子元素被清空了，

2.给transclude传递两个参数

将以上案例修改如下：

 app.directive('dx',function() {

        return {

            transclude:'true',

            link:function(scope,ele,sttr,ctrl,transclude){

                transclude(scope,function(sub){

                    for(var i = 0;i<3;i++){

                        ele.append(sub.clone());

                    }

                });

            }

        }

    });

运行效果没有发生任何变化。第二个参数中的sub，也还是当前指令的子元素。

上面说过获取到的子元素都是有自己的作用域，第一个参数scope是这个子元素的上下文环境，子元素的作用域会继承这个上下文环境。

例子：

<body ng-app="app">

这是外部的name：{{name}}

<dx>

    这是我自定义的：{{name}}

</dx>

</body>

<script>

    var app = angular.module('app',[]);

    app.directive('dx',function() {

        return {

            transclude:'true',

            link:function(scope,ele,sttr,ctrl,transclude){

                scope.name = 7777;

                var myScope = scope.$new();

                myScope.name = 1233;

                transclude(myScope,function(sub){

                    ele.append(sub);

                });

            }

        }

    });

</script>

运行结果：这是外部的name：7777 这是我自定义的：1233

以上通过new从当前的作用域中衍生出一个新的作用域（新的作用域继承自当前作用域）。然后对新的作用域进行数据修改，最后应用到子元素上。

对获取到的子元素进行进一步理解：

<dx>

    这是我自定义的：{{name}}

</dx>

</body>

<script>

    var app = angular.module('app',[]);

    app.directive('dx',function() {

        return {

            transclude:'true',

            link:function(scope,ele,sttr,ctrl,transclude){

                var myScope = scope.$new();

                myScope.name = 1233;

                transclude(myScope,function(sub){

                    for(var i = 0;i<3;i++){

                        ele.append(sub.clone());

                    }

                });

            }

        }

    });

</script>

运行结果：这是我自定义的：{{name}} 这是我自定义的：{{name}} 这是我自定义的：{{name}}

显然这不是我们想要的，而且为什么会出现这样的结果？

因为我们在循环中添加的只是克隆体，或者直接理解为添加的仅仅是一坨html而已，这和angular没有任何关系，自然也就不存在数据绑定的说法，所以文本就直接显示出来了。

解决办法就是让这一坨html与angular扯上关系，进行手动编译，注入$compile服务，然后修改循环如下：

                transclude(scope,function(sub){

                    for(var i = 0;i<3;i++){

                        var clone = sub.clone();

                        $compile(clone)(myScope);

                        ele.append(clone);

                    }

                });

以上transclude的第一个scope实际上已经没用了，因为手动编译的时候，我们指定了这个被编译元素的上下文，编译过程就会只读取这个上下文了。

总结：transclude的第一个scope仅仅针对sub本身是有用的，而对于sub的克隆体来说没有任何用处

angularJS transclude的更多相关文章

  1. angularjs transclude demo

    <!doctype html> <html lang="en" ng-app="expanderModule"> <head> ...

  2. [AngularJS] Transclude -- using what existing in DOM to replace the template elements in directive

    var app = angular.module("phoneApp", []); app.controller("AppCtrl", function($sc ...

  3. AngularJS transclude 理解及例子

    一.概念理解 transclude可以在指令中让使用者自定义模板,也就是说,指令中模板的一部分,让指令的使用者动态指定:与指定中的Scope属性值为{}时候的作用类似,scope属性让指令使用者动态制 ...

  4. angularjs指令参数transclude

    angularjs指令参数transclude transclude翻译为嵌入,和之前看到的vue中的slots作用差不多,目的是将指令元素的子内容嵌入到指令的模板中 定义指令 <div sid ...

  5. AngularJs directive 'transclude' option 详解

    transclude好像不是一个英语单词,有道词典里没有,百度翻译的意思是嵌入. transclude在angularjs的自定义的derective中是比较常见的一个东西,所有有必要要了解它. 我们 ...

  6. angularjs作用域之transclude

    transclude是一个可选的参数.如果设置了,其值必须为true,它的默认值是false.嵌入有时被认为是一个高级主题,但某些情况下它与我们刚刚学习过的作用域之间会有非常好的配合.使用嵌入也会很好 ...

  7. 浅析AngularJS自定义指令之嵌入(transclude)

    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...

  8. AngularJs 中的transclude的理解

    Transclude是一个配置, 为了告诉AngularJs去获取当前指令模版内部的所有内容(实际使用ng-transclude), 更多关于怎么创建一个包含其他元素的指令: documentatio ...

  9. AngularJS中transclude用法详解

    这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能.使用技巧与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS中transcl ...

随机推荐

  1. 如何才能优雅地书写JS代码

    第一:关于匿名函数的使用 要避免全局变量泛滥, 可以考虑使用匿名函数, 把不需要在外部访问的变量或者函数限制在一个比较小的范围内. 例如以下代码: <script> function fu ...

  2. AdventureWorks2012.mdf的使用

    AdventureWorks2012.mdf的使用,在数据库管理器界面中,右击数据库,然后附加,然后选择好AdventureWorks2012.mdf,然后删掉log,然后确定即可.

  3. 跟我一起玩Win32开发（18）：使用对话框的两个技巧

    相信大家知道对话框怎么用了,就是先用“资源编辑器”设计一个对话框,然后在代码中加载处理.今天,我向大家分享两个使用对话框的技巧,还是比较实用的.不用担心,先喝杯茶,很简单的,一点也不复杂,总之,看俺写 ...

  4. Caffe实战三（依赖包解析及环境配置）

    前面的文章使用的软件环境是开始时通过apt-get命令所安装的,本文将通过编译源码的方式重新配置一个可迁移的软件环境.(参考:<深度学习 21天实战Caffe> 第五天 Caffe依赖包解 ...

  5. loj124 除数函数求和 1

    loj124 除数函数求和 1 https://loj.ac/problem/124 $\sum_{i=1}^n(\sum_{d|i}d^k)=\sum_{i=1}^n(i^k*{\lfloor}{\ ...

  6. Keepalived+LVS(DR)+MySQL

    实验环境 主机名 IP VIP 服务 主备 KA_LV_MYSQL_01 192.168.30.130 192.168.30.100 keepalived.LVS.MySQL MASTER KA_LV ...

  7. Web service简介 与servletContext的参数

    Web service顾名思义是基于web的服务,它是一种跨平台,跨语言的服务. 我们可以这样理解它,比如说我们可以调用互联网上查询天气信息的web服务,把它嵌入到我们的B/S程序中,当用户从我们的网 ...

  8. 导Excel数据表

    需要把EXcel转换格式:

  9. oracle 触发器，序列，索引

    oracle 触发器,序列,索引 --1,触发器 ----trigger /*触发器是一种特殊的存储过程,它与数据表紧密联系,用于保护表中的数据, 当一个定义了特定类型触发器的基表执行插入.修改或删除 ...

  10. phpcms v9模板制作教程

    phpcms v9模板制作教程(转载) 第一节 1.首先下载phpcms v9的集成安装包并安装,这里就不详细说明了. 2.本地调试建议大家使用APMserver,或者wampserver等,可以到P ...