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. Lua学习笔记（一）-----C#和lua的交互

    一直以来对Lua热更新技术很感兴趣,在上周开始了对Lua的学习,主要学的是uLua. 直接上干货 准备工作: LuaInterface包括两个核心库一个是LuaInterface.dll,一个是Lua ...

  2. Java日志——2016.6.3

    1)二维数组的静态初始化:                int[][] arr = new int[][] { {1,2,3}, {4,5}, {6,7}} 2)杨辉三角: /** *    需求: ...

  3. Parse the main function arguments

    int main(int argc, char **argv) { std::string reportDir; std::string transURL; std::string visualEle ...

  4. 《SSM框架搭建》三.整合spring web

    感谢学习http://blog.csdn.net/zhshulin/article/details/37956105#,还是修改了spring到最新的版本和接口开发示例 根据前一篇日志,已经有了myb ...

  5. nginx的优化

    Nginx 优化 Nginx是俄罗斯人编写的十分轻量级的HTTP服务器,Nginx,它的发音为"engine X",是一个高性能的HTTP和反向代理服务器,同时也是一个IMAP/P ...

  6. AIX 环境下Telnet返回提示所有端口已经被占用,处理方法

    IBM AIX v5.3操作系统环境Telnet返回提示所有端口已经被占用 可以按以下步骤进行检查和处理 1,以下命令检查pty0是否可用 #lsdev -Cl pty0 2,以下命令检查telnet ...

  7. C# MVC ( 添加路由规则以及路由的反射机制 )

    在项目文件夹下找到 App_Start 下 找到 RouteConfig.cs文件 打开   (1) 约束的规则 从上往下 贪婪性   (2) 用 routes.MapRoute(...) 添加   ...

  8. ActiveMQ学习笔记(5)——使用Spring JMS收发消息

      摘要 ActiveMQ学习笔记(四)http://my.oschina.net/xiaoxishan/blog/380446 中记录了如何使用原生的方式从ActiveMQ中收发消息.可以看出,每次 ...

  9. ios UINaviBar 去除分割线

    //For a custom shadow image to be shown, custom background image must also be set with the setBackgr ...

  10. UCS2和UTF16有区别

    UCS2是定长的,固定2个字节,所以不能支持扩展字符,而UTF16是变长的.   UCS2是落伍的.   msdn里有这样一段描述: UCS-2 is a predecessor of UTF-16. ...