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. python1变量，表达式和语句

    1.变量和类型 变量是指向各种类型值的名字,以后再用到某个值时,直接引用这个名字即可,不用再写具体的值,在python中,变量的使用环境非常宽松,没有明显的变量声明,而且类型不是固定的.如果你不能确定 ...

  2. VS2015配置安卓Android和iOS开发环境

    http://www.cjjjs.cn/paper/gzsh/627201502818357.aspx [摘要] 本文按照步骤一步步的介绍要下载安装的东西,都提供了下载地址.最后将所有需要的程序都打包 ...

  3. JAVA垃圾回收笔记

    一.分析GC日志 /** * @author : Hejinsheng * @date : 2019/1/18 0018 * @Description: 模拟FULL GC/YOUNG GC * -X ...

  4. vscode 编写c++

    参考了 配置文件之前的操作:https://www.cnblogs.com/lianshuiwuyi/p/8094388.html 配置文件具体内容:https://blog.csdn.net/qq5 ...

  5. QQ空间动态内容，好友信息，点赞爬虫脚本

    一.安装基础的软件包: 1.准备好火狐浏览器,并下载geckodriver,将geckodriver加入到环境变量:下载geckodriver的地址:https://pan.baidu.com/s/1 ...

  6. SpringMVC学习大纲

    PartA: 1.SpringMVC介绍 2.入门程序 3.SpringMVC架构讲解 a) 框架结构 b) 组件说明 4.SpringMVC整合MyBatis 5.参数绑定 a) SpringMVC ...

  7. udev和mdev hotplug事件

    关于udev和mdev之间的区别与联系我发现自己现在还没有把它完整的给区分开来和联系起来. 设备文件系统有devfs,mdev,udev mdev是udev的简化版本,是busybox中所带的程序,最 ...

  8. Saltstack sls文件：批量替换指定文件

    一.创建salt管理配置文件:将所有minion 指定文件替换为master端的文件. 1.创建salt管理目录,并创建salt配置文件规范 # 创建salt文件目录 mkdir /srv/{salt ...

  9. 物理机内存模型与java内存模型

    多线程缓存一致性问题 程序在运行过程中,会将运算需要的数据从主存复制一份到CPU的高速缓存当中,那么CPU进行计算时就可以直接从它的高速缓存读取数据和向其中写入数据,当运算结束之后,再将高速缓存中的数 ...

  10. Unix下 五种 I/O模型

    Unix下共有五种I/O模型: 1. 阻塞式I/O  2. 非阻塞式I/O  3. I/O复用(select和poll)  4. 信号驱动式I/O(SIGIO)  5. 异步I/O(POSIX的aio ...