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

先看个例子：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <script src="../lib/angular-1.3.16/angular.min.js"></script>
  6.     <script src=""></script>
  7.     <title></title>
  8.     <script language="JavaScript">
  9.  
  10.         angular.module('app',[])
  11.                 .directive('myDirective',function(){
  12.                     return{
  13.                         template:'<div>\
  14.                                     <h2>大标题</h2>\
  15.                                 </div>'
  16.                     };
  17.                 });
  18.     </script>
  19. </head>
  20. <body ng-app="app">
  21. <div my-directive >
  22.     <ul>
  23.         <li>小标题1</li>
  24.         <li>小标题2</li>
  25.     </ul>
  26. </div>
  27. </body>
  28. </html>

输出：

大标题

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

魂淡，全丢没了！

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <script src="../lib/angular-1.3.16/angular.min.js"></script>
  6.     <script src=""></script>
  7.     <title></title>
  8.     <script language="JavaScript">
  9.  
  10.         angular.module('app',[])
  11.                 .directive('myDirective',function(){
  12.                     return{
  13.                         template:'<div>\
  14.                                     <h2>大标题</h2>\
  15.                                         <span ng-transclude></span>\
  16.                                 </div>',
  17.                         transclude:true
  18.                     };
  19.                 });
  20.     </script>
  21. </head>
  22. <body ng-app="app">
  23. <div my-directive >
  24.     <ul>
  25.         <li>小标题1</li>
  26.         <li>小标题2</li>
  27.     </ul>
  28. </div>
  29. </body>
  30. </html>

输出：

大标题

  • 小标题1
  • 小标题2

审查元素看看：

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <script src="../lib/angular-1.3.16/angular.min.js"></script>
  6.     <script src=""></script>
  7.     <title></title>
  8.     <script language="JavaScript">
  9.  
  10.         angular.module('app',[])
  11.                 .directive('myDirective',function(){
  12.                     return{
  13.                         restrict:'E',
  14.                         template:'<div>\
  15.                                     <h2>大标题</h2>\
  16.                                         <span ng-transclude></span>\
  17.                                 </div>',
  18.                         transclude:true
  19.                     };
  20.                 })
  21.                 .directive('myDirective2',function(){
  22.                     return{
  23.                         restrict:'E',
  24.                         template:'<div>\
  25.                                     <h3>中标题</h3>\
  26.                                         <span ng-transclude></span>\
  27.                                 </div>',
  28.                         transclude:true
  29.                     };
  30.                 });
  31.     </script>
  32. </head>
  33. <body ng-app="app">
  34. <my-directive>
  35.     <my-directive2>
  36.         <ul>
  37.             <li>小标题1</li>
  38.             <li>小标题2</li>
  39.         </ul>
  40.     </my-directive2>
  41. </my-directive>
  42. </body>
  43. </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. python已字典为元素的数组排序

    dict = [ {','name':'b'}, {','name':'c'}, {','name':'a'}, {','name':'g'}, {','name':'f'} ] dict.sort( ...

  2. 几种方法实现ajax请求内容时使用浏览器后退和前进功能

    ajax是一个非常好玩的小东西,不过用起来也会存在一些问题. 我们可以利用ajax进行无刷新改变文档内容,但是没办法去修改URL,即无法实现浏览器的前进与后退.书签的收藏功能. 利用location的 ...

  3. NRF51822之IIC(MEMS_LIS2DH12)

    在上篇介绍了OLED的II以写操作为主,没有进行读取操作.所以在现再补充读取的操作. 我在此以LIS2DH为例子 uint8_t temp; lis2dh_read_registers(LIS2DH_ ...

  4. Python:利用内建函数将字符串转化为整数

    使用内建函数raw_input()内建函数,它读取标准输入,并将读取到的数据赋值给指定的变量.我们可以使用int()内建函数将用户输入的字符串转换为整数: >>> user = ra ...

  5. matlab 按照某列以行为单位进行排序

    a=[2 1 3 21 44 3] 然后按照第一列进行排序 sortrows(a,1) ans = 1 4 2 1 3 2 4 3 如要逆序,可以逆序读矩阵即可

  6. SRM 146 DIV2 1000

    Problem Statement      A well-known riddle goes like this: Four people are crossing an old bridge. T ...

  7. raw,cow,qcow,qcow2镜像的比较

    在linux下,虚拟机的选择方式有很多,比如vmware for linux,virtual box,还有qemu,在以前,使用qemu的人不多,主要是使用起来有些麻烦,但现在随着Openstack的 ...

  8. asp.net前台代码中引入namespace的方法

    <%@ import NameSpace="System.Data.OleDb" %>

  9. ubuntu用apt安装apache2时，出现E：未发现软件包 apache2

    解决方法:使用sudo apt-get update更新软件包 更新软件包失败,多半使用因为源文件不干净,在/etc/apt下重新自己新写一份源文件 然后执行 sudo apt-get update

  10. UML大战需求分析阅读笔记2

    全面深入理解客户的业务,才能帮助我们准确的把握客户的需要.而在理解客户业务的同时,我们往往需要做业务流程再造(BPR:Business Process Reengineering)的工作.BPR简单说 ...