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. 墨卡托投影C#实现

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. python selenium 操作chrome

    1.下载chromedriver.exe 入在chrome 浏览器目录下 from selenium import webdriverimport os chromedriver = "C: ...

  3. C语言字符输出格式化

    转自http://blog.csdn.net/pbymw8iwm/article/details/8153226 符号属性 长度属性 基本型 所占 位数 取值范围 输入符举例 输出符举例 -- -- ...

  4. Java7的垃圾回收

    HotSpot JVM一共有4个垃圾回收器:Serial(串行).Parallel / Throughput(并行).CMS(并发).and the new kid on the block G1(G ...

  5. 修改eclipse运行内存的大小

    一.    尝试修改Eclipse.ini 文件 (此方法不行) 找到eclipse 目录下的eclipse.ini 文件,修改下面的内容: -Xms40m -Xmx512m 修改后重启eclipse ...

  6. 使用SerialPort 读取外置GPS信息和使用GeoCoordinateWatcher获取内置gps的信息

    简介最近工作中需要读取gps设备的信息,平板本身有内置的gps设备,但是精度不够,就又添加了一个外置的gps.对于外置的gps,我们主要通过SerialPort类来获得串口的信息,然后对接收到的内容进 ...

  7. BootStrap基本控件

    简介 BootStrap是一个用于快速开发web应用程序和网站的前端框架. BootStrap是基于HTML, CSS, JavaScript. BootStrap是由Twitter的Mark Ott ...

  8. 00904. 00000 - "%s: invalid identifier"

    SELECT * FROM table name WHERE STRING_VALUE like '%Britaney Searing%' ORDER BY COMPOSITE_INSTANCE_ID ...

  9. invoke

    在用.NET Framework框架的WinForm构建GUI程序界面时,如果要在控件的事件响应函数中改变控件的状态,例如:某个按钮上的文本原先叫“打开”,单击之后按钮上的文本显示“关闭”,初学者往往 ...

  10. SimpleChannelInboundHandler和ChannelInboundHandlerAdapter区别

    一般用netty来发送和接收数据都会继承SimpleChannelInboundHandler和ChannelInboundHandlerAdapter这两个抽象类,那么这两个到底有什么区别呢? 其实 ...