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. asp.net MVC上传图片完整方法

    图片上传 自动创建文件夹并重命名(带缩略图) 后台: [HttpPost] public ActionResult WanSell_UploadPicture(ProductGalleryModels ...

  2. 关于C语言里指针的基本概念

    C是很强大的一门语言,然而C语言的强大并不是强大在他的语法和“.h”文件,而是指针.    对指针通用的认知都是:指针是指向内存地址的一个变量.对于这句话,我是这么理解的:核心有两点,第一个是“指向内 ...

  3. SE要有政治能力

    不光是SE,任何人都需要政治能力. 那么,什么是政治能力?政治能力就是让周围的人跟你一起,一条心,完成你想干的事情的能力. 我们任何人,生活也好,工作也好,学习也好,都不是一个人孤单进行的,都是通过几 ...

  4. scala-尾递归

    ------------------------- by chenkh ----------------------------- 随笔记录什么是尾递归,为什么需要尾递归,尾递归show by exa ...

  5. MapReduce 过程分析

    原文地址:http://blog.jobbole.com/81676/ 2.WordCount处理过程 上面给出了WordCount的设计思路和源码,但是没有深入细节,下面对WordCount进行更加 ...

  6. 正则表达式提取string 中的表名

    简单版本: Regex reg = new Regex(@"(?i)\bfrom\b(?![^\[\]]*\])\s+(\[[^\[\]]+\]|\S+)"); MatchColl ...

  7. windbg学习---!thread和.thread

    !thread扩展显示目标系统中线程包括ETHREAD块在内的摘要信息.该命令只能在内核模式调试下使用 !thread [-p] [-t] [Address [Flags]] -p 显示拥有该线程的进 ...

  8. c语言-链表VS数组

    数组和链表的区别   数组是将元素在内存中连续存放,由于每个元素占用内存相同,可以通过下标迅速访问数组中任何元素.但是如果要在数组中增加一个元素,需要移动大量元素,在内存中空出一个元素的空间,然后将要 ...

  9. jquery EasyUI datagrid 的扩展

    接触 easyui 半年,js学的不深.大神请路过. 直接扩展 添加方法: $.extend($.fn.datagrid.methods, { getSelectedIndex: function ( ...

  10. sscanf与正则表达式(转)

    今天翻google reader的时候看到这样一篇文章,介绍的是sscanf的高级用法.直到今天我才知道sscanf是可以直接用正则表达式的,惭愧. 在msdn中sscanf的声明如下 int ssc ...