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. leetcode 191

    191. Number of 1 Bits Write a function that takes an unsigned integer and returns the number of ’1' ...

  2. Android IOS WebRTC 音视频开发总结（八十二）-- VP8对VP9，质量还是码率？

    本文主要介绍VP9(我们翻译和整理的,译者:weizhenwei,校验:blacker),最早发表在[编风网] 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacker(微信ID:blacke ...

  3. Java的基本程序设计结构（上）

    在Java中,每一个变量属于一种类型(type).在声明变量时,变量所属的类型位于变量名之前. 例如: double salary; int vacationDays; long earthPopul ...

  4. Socket原理与编程基础

    一.Socket简介 Socket是进程通讯的一种方式,即调用这个网络库的一些API函数实现分布在不同主机的相关进程之间的数据交换. 几个定义: (1)IP地址:即依照TCP/IP协议分配给本地主机的 ...

  5. Ansible playbook API 开发 调用测试

    Ansible是Agentless的轻量级批量配置管理工具,由于出现的比较晚(13年)基于Ansible进行开发的相关文档较少,因此,这里通过一些小的实验,结合现有资料以及源码,探索一下Ansible ...

  6. python环境

    官网:https://www.python.org windows环境:http://www.cnblogs.com/windinsky/archive/2012/09/20/2695520.html ...

  7. RabbitMQ on windows开启远程访问

    我的RabbitMQ安装位置是:C:\Program Files (x86)\RabbitMQ Server\rabbitmq_server-3.5.6 为rabbitmq添加用户 C:\Progra ...

  8. BZOJ1093 [ZJOI2007]最大半连通子图

    Description 一个有向图G=(V,E)称为半连通的(Semi-Connected),如果满足:?u,v∈V,满足u→v或v→u,即对于图中任意两点u,v,存在一条u到v的有向路径或者从v到u ...

  9. sqlserver存取过程游标

    ALTER proc [dbo].[common_proc_temp2] as begin declare @id varchar(50); declare @cbcontractid varchar ...

  10. jshint创建配置文件

    在项目中创建文件,并必须以 .jshintrc 命名: 例如 {    "eqeqeq":true,     "curly":true}