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. centos7 vmware克隆解决网络问题

    centos7克隆后,发现两台机子之间的MAC相同,无法获取IP.超找资料,解决办法如下: 只要删除网卡的配置文件中的HWADDR和UUID两行就行.使用ifup启动网卡即可.

  2. 图形数据库 Neo4j 开发实战【转载】

    简介: Neo4j 是一个高性能的 NoSQL 图形数据库.Neo4j 使用图(graph)相关的概念来描述数据模型,把数据保存为图中的节点以及节点之间的关系.很多应用中数据之间的关系,可以很直接地使 ...

  3. Hadoop MapReduce InputFormat基础

    有时候你可能想要用不同的方法从input data中读取数据.那么你就需要创建一个自己的InputFormat类.   InputFormat是一个只有两个函数的接口.   public interf ...

  4. httpmessageconverter requestbody responsebody

    @ResponseBody @RequestMapping("/testHttpMessageConverter") public String testHttpMessageCo ...

  5. python2.7中的字符编码问题

    0. 写在前面 起因:之前写个数据预处理程序的时候遇到了点问题,用re模块的正则查找方法search时总是找不出来(找错了或者出乱码),于是捣鼓捣鼓. 经过:查资料,做实验,发现用utf8编码的str ...

  6. Python单元测试框架——unittest

    测试的常用规则 一个测试单元必须关注一个很小的功能函数,证明它是正确的: 每个测试单元必须是完全独立的,必须能单独运行.这样意味着每一个测试方法必须重新加载数据,执行完毕后做一些清理工作.通常通过se ...

  7. 20162305李昱兴 2016-2017-2 《Java程序设计》第2周学习总结

    20162305 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 教材的第二章以数据和表达式为主.在第二章的学习中,我了解了print以及println的用法 ...

  8. RN项目中缩进处理

    SpannableString使用详解http://blog.csdn.net/u012702547/article/details/49895157 Spannable的用法http://www.j ...

  9. [BZOJ1018]堵塞的交通traffic

    Description 有一天,由于某种穿越现象作用,你来到了传说中的小人国.小人国的布局非常奇特,整个国家的交通系统可以被看成是一个2行C列的矩形网格,网格上的每个点代表一个城市,相邻的城市之间有一 ...

  10. DelayQueue与ProirityBlockingQueue

    DelayQueue是一个无界队列,只有在延迟期满的时候,才可以取出元素.该队列的头部存储的延期期满了后保存时间最长的元素. DelayQueue阻塞队列在我们系统开发中也常常会用到,例如:缓存系统的 ...