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. 调试ASP.NET网站IIS环境问题解决方法汇总

    调试网站时出现错误,错误如下: 1. 分析器错误消息: 创建 RewriterConfig 的配置节处理程序时出错: 无法生成临时类(result=1).error CS2001: 未能找到源文件“C ...

  2. 基于Promise对象的新一代Ajax API--fetch

    ***************************************************************** #fetch Request 使用isomorphic-fetch发 ...

  3. No module named bz2

    yum install bzip* python2.6 import bz2 python2.7 import bz2 error 解决:sudo cp /usr/lib64/python2.6/li ...

  4. 用树状数组求逆序对数（poj2299）

    Ultra-QuickSort Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 46995   Accepted: 17168 ...

  5. SpringBoot 定义通过字段验证

    第一步:定义ValidationResult类 public class ValidationResult { // 校验结果是否有错 private boolean hasErrors = fals ...

  6. jQ&js给label

    <strong>当前角色:</strong><label id="lblRoleName" style="margin-bottom: 0p ...

  7. 有意思的随机数 Random

    今天看到stackoverflow上一篇关于随机数的提问,关于如何用随机数生成 "hello world"的有趣问题 : 大家都知道JDK里面的Random类生成随机数其实并不是真 ...

  8. scala学习手记14 - 单例对象

    java中的单例模式都很熟悉了:简单地说就是一个类只能有一个实例.在scala中创建单例对象非常简单,创建类时使用object关键字替换class即可.因为单例类无法初始化,所以不能向它的主构造函数传 ...

  9. java socket - 半关闭

    通常,使用关闭输出流来表示输出已经结束.但在进行网络通信时则不能这样做.因为我们关闭输出流时,该输出流对应的Socket也将随之关闭,这样程序将无法再从该socket中读取数据. 为了应付这种情况,s ...

  10. JDK_环境变量

    1. 在系统环境变量中设置: ClASSPATH中输入: ".;C:\Program Files\Java\jdk1.7.0_07\jre\lib\rt.jar;"//java的安 ...