transclude默认值为false，如果设置 transclude为true，那么相应地，必须在模板代码中加入ng-transclude指令。

先看个例子：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script src="../lib/angular-1.3.16/angular.min.js"></script>

    <script src=""></script>

    <title></title>

    <script language="JavaScript">

        angular.module('app',[])

                .directive('myDirective',function(){

                    return{

                        template:'<div>\

                                    <h2>大标题</h2>\

                                </div>'

                    };

                });

    </script>

</head>

<body ng-app="app">

<div my-directive >

    <ul>

        <li>小标题1</li>

        <li>小标题2</li>

    </ul>

</div>

</body>

</html>

输出：

大标题

见鬼！小标题全不见了！审查元素看看：

魂淡，全丢没了！

没办法，出动transclude！看代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script src="../lib/angular-1.3.16/angular.min.js"></script>

    <script src=""></script>

    <title></title>

    <script language="JavaScript">

        angular.module('app',[])

                .directive('myDirective',function(){

                    return{

                        template:'<div>\

                                    <h2>大标题</h2>\

                                        <span ng-transclude></span>\

                                </div>',

                        transclude:true

                    };

                });

    </script>

</head>

<body ng-app="app">

<div my-directive >

    <ul>

        <li>小标题1</li>

        <li>小标题2</li>

    </ul>

</div>

</body>

</html>

输出：

大标题

  • 小标题1
  • 小标题2

审查元素看看：

再看看这个指令嵌套的例子：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script src="../lib/angular-1.3.16/angular.min.js"></script>

    <script src=""></script>

    <title></title>

    <script language="JavaScript">

        angular.module('app',[])

                .directive('myDirective',function(){

                    return{

                        restrict:'E',

                        template:'<div>\

                                    <h2>大标题</h2>\

                                        <span ng-transclude></span>\

                                </div>',

                        transclude:true

                    };

                })

                .directive('myDirective2',function(){

                    return{

                        restrict:'E',

                        template:'<div>\

                                    <h3>中标题</h3>\

                                        <span ng-transclude></span>\

                                </div>',

                        transclude:true

                    };

                });

    </script>

</head>

<body ng-app="app">

<my-directive>

    <my-directive2>

        <ul>

            <li>小标题1</li>

            <li>小标题2</li>

        </ul>

    </my-directive2>

</my-directive>

</body>

</html>

输出:

大标题

中标题

  • 小标题1
  • 小标题2

可以尝试把指令里的transclude:true去掉，输出肯定有问题，所以两个指令里的transclude:true都是必需的。

AngularJs自定义指令详解（4） - transclude的更多相关文章

  1. AngularJs自定义指令详解（1） - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  2. AngularJs自定义指令详解（6） - controller、require

    在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...

  3. AngularJs自定义指令详解（2） - template

    一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...

  4. AngularJs自定义指令详解（5） - link

    在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如 ...

  5. AngularJs自定义指令详解（9） - terminal

    例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...

  6. AngularJs自定义指令详解（8） - priority

    priority 默认值为0. 当一个元素上声明两个指令,而且它们的priority一样,谁先被调用?这个需要分情况讲.下面先给个例子: <!DOCTYPE html> <html& ...

  7. AngularJs自定义指令详解（7） - multiElement

    multiElement不太常用,从下面这个例子可以大致看出它的作用: <!DOCTYPE html> <html> <head lang="en"& ...

  8. AngularJs自定义指令详解（3） - scope

    我们之所以要定义指令,目的是重用指令.假设有这么一个应用场景:在同一个html里使用了两次my-directive,第一个my-directive要展示的是Hello World,第二个my-dire ...

  9. AngularJs自定义指令详解（10） - 执行次序

    代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...

随机推荐

  1. Dev ChartControl鼠标移动显示坐标点

    his.chartIRC_RATES.MouseMove += new MouseEventHandler(chartIRC_RATES_MouseMove); ToolTipController t ...

  2. 使用axi_datamover完成ZYNQ片内PS与PL间的数据传输

    分享下PS与PL之间数据传输比较另类的实现方式,实现目标是: 1.传输时数据不能滞留在一端,无论是1个字节还是1K字节都能立即发送: 2.PL端接口为FIFO接口: PS到PL的数据传输流程: PS到 ...

  3. html5 弹框 可用于安卓手机弹出输入框

    function text() { name=prompt("请输入wifi密码"); // 弹出input框 prompt('提示语','默认输入框字段') //alert(na ...

  4. netstat命令

    netstat命令会罗列出当前所有的网络连接.连接统计以及路由表信息.默认情况下,netstat命令将罗列出本地计算机所有开启的端口情况,以及它所连接的外部计算机情况. 端口就像一所房子的房门一样.数 ...

  5. Nginx内置变量以及日志格式变量参数详解

    $args #请求中的参数值 $query_string #同 $args $arg_NAME #GET请求中NAME的值 $is_args #如果请求中有参数,值为"?",否则为 ...

  6. 9.1 js基础总结2

    3.布尔类型(Boolean) 布尔型数据只有true和false两个值,与字符串不同,不要把布尔值用引号括起来,布尔值false与字符串“false”是两回事. var married = true ...

  7. sip常用消息实体参考（系网上摘抄，感谢分享）

    1.MESSAGE消息       1)头字段填写说明       Call-id:                 必选       CSeq:                   必选       ...

  8. Error:(1, 1) error: illegal character: \65279解决方法

    NotePad++,选择格式,选择转为UTF-8无BOM格式,即可解决,感谢http://tzwzero-163-com.iteye.com/blog/1696605

  9. git工作中的常用操作

    上班开始,打开电脑,git pull:拉取git上最新的代码: 编辑代码,准备提交时,git stash:将自己编辑的代码暂存起来,防止git pull时与库中的代码起冲突,否则自己的代码就白敲了: ...

  10. 第十八周个人作业--The Final

    项目计划   完成这个项目需要的时间:5-7天项目开发  需求分析:    作为一名排球赛事管理者,我希望能够根据比赛查询每场比赛的结果,以便于确定每支球队的比赛名次.  设计文档    由排球比赛用 ...