Transclude是一个配置, 为了告诉AngularJs去获取当前指令模版内部的所有内容(实际使用ng-transclude), 更多关于怎么创建一个包含其他元素的指令: documentation of directives

下面自定义一个指令用ng-transclude在指令模版中去指定你想插入的内容:

angular.module('app', [])

  .directive('hero', function () {

    return {

      restrict: 'E',

      transclude: true,

      scope: { name:'@' },

      template: '<div>' +

                  '<div>{{name}}</div><br>' +

                  '<div ng-transclude></div>' +

                '</div>'

    };

  });

代码使用如下:

<hero name="superman">Stuff inside the custom directive</hero>

页面显示如下:

Superman

Stuff inside the custom directive

完整的例子: 

Index.html

<body ng-app="myApp">

  <div class="AAA">

   <hero name="superman">Stuff inside the custom directive</hero>

</div>

</body>

jscript.js

angular.module('myApp', []).directive('hero', function () {

    return {

      restrict: 'E',

      transclude: true,

      scope: { name:'@' },

      template: '<div>' +

                  '<div>{{name}}</div><br>' +

                  '<div ng-transclude></div>' +

                '</div>'

    };

  });

页面: 

实现:

AngularJs 中的transclude的理解的更多相关文章

  1. $q -- AngularJS中的服务（理解）

      描述 译者注: 看到了一篇非常好的文章,如果你有兴趣,可以查看: Promises与Javascript异步编程 , 里面对Promises规范和使用情景,好处讲的非常好透彻,个人觉得简单易懂. ...

  2. AngularJS中transclude用法详解

    这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能.使用技巧与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS中transcl ...

  3. angularJS中的Promise对象($q)的深入理解

    原文链接:a better way to learn AngularJS - promises AngularJS通过内置的$q服务提供Promise编程模式.通过将异步函数注册到promise对象, ...

  4. 转: 理解AngularJS中的依赖注入

    理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...

  5. 理解AngularJS中的依赖注入

    点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...

  6. 关于AngularJs中监听事件及脏循环的理解

    可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个s ...

  7. 理解angularJS中作用域$scope

    angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...

  8. 怎么理解angularjs中的服务？

    AngularJS中的服务其实就是提供一种方式抽取共用类库 比如说一些工具类方法,我们传统的做法就是自己写个 utility 类,把相关的工具方法填充到utility里面去,最后把utility类放到 ...

  9. 淡淡理解下AngularJS中的module

    在AngularJS中module是一个核心的存在,包括了很多方面,比如controller, config, service, factory, directive, constant, 等等. 在 ...

随机推荐

  1. ssh远程执行远程执行命令

    ssh zxrac1 '/home/oracle/tmp/t5.sh 2 2 >/dev/null 2>&1 &'

  2. Hive学习路线图--张丹老师

    前言 Hive是Hadoop家族中一款数据仓库产品,Hive最大的特点就是提供了类SQL的语法,封装了底层的MapReduce过程,让有SQL基础的业务人员,也可以直接利用Hadoop进行大数据的操作 ...

  3. unix 全缓冲、行缓冲、无缓冲

    基于流的操作最终会调用read或者write函数进行I/O操作.为了使程序的运行效率最高,流对象通常会提供缓冲区,以减少调用系统I/O库函数的次数. 基于流的I/O提供以下3种缓冲: 全 缓冲:直到缓 ...

  4. 移动端笔记——jQuery touch事件

    判断移动端还是pc端 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array("A ...

  5. php优化，操作码优化，缓存优化

    一.php缓存加速器软件种类 xcache,eaccelerator,zend,apc如何选择:建议xcache,eaccelerator,二选一,首选xcachexcache更快 二.php缓存加速 ...

  6. 第二课客户端链接Linux系统

    使用Putty客户端软件连接Linux主机 使用rpm –qa | grep ssh命令查看是否已经安装ssh服务,如下图是已经安装了ssh服务,如果未列出相关的openssh那么代表未安装这时候就需 ...

  7. Linux Shell编程 exit、break、continue

    exit语句 在系统中exit 命令用于退出当前用户的登录状态.在 Shell 脚本中exit 语句是用来退出当前脚本. exit 的语法如下: exit [返回值] 如果在 exit 之后定义了返回 ...

  8. initrd.img的压缩(制作)及解压的过程

    一.启动镜像initrd.img 文件类RedHat 系统从vmlinuz 核心引导后,会读取initrd.img 启动镜像.该文件中包含驱动模块等信息,是非常重要的文件.不同版本使用的格式不同.1. ...

  9. C# Json格式

    using LitJson; //自定义Json类 JsonDataResult jsondata = new JsonDataResult() { Success = false }; HttpCo ...

  10. Mybatis${}、#{}及使用#{}时指定jdbcType

    一.Mybatis 的Mapper.xml语句中parameterType向SQL语句传参有两种方式:#{}和${} 我们经常使用的是#{},一般解说是因为这种方式可以防止SQL注入,简单的说#{}这 ...