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. 学点TCPDUMP

    [root@future ~]# yum install tcpdump 官网地址: https://nmap.org/ 还有中文手册,太感动了 https://nmap.org/man/zh/man ...

  2. Codeforces Round #303 (Div. 2)

    A.Toy Cars 题意:给出n辆玩具车两两碰撞的结果,找出没有翻车过的玩具车. 思路:简单题.遍历即可. #include<iostream> #include<cstdio&g ...

  3. URAL - 1902 Neo-Venice

    题目: Mars was the first planet colonized by humans. After a long terraforming process its appearance ...

  4. iOS 调整图片尺寸，告诉你的UI，别问我尺寸！我要最大的

    如果UI问你“这个图片你要多大尺寸的?”,你该怎么回答呢? 为了不让图片因拉伸或压缩而变形或模糊,请精确告诉UI图片的比例,至于图片的分辨率,不必要要求太严,但是最低要求是要让最大的屏幕不会出现前面描 ...

  5. windows下的DeepLearning环境搭建：Theano的安装

    我的系统版本:windows8.1 64位 安装theano需要安装python.numpy等很多东西,为了简便,我这里用的是Anaconda 首先,清理电脑上的所有有关python的组件(可不清理, ...

  6. sql统计上周销售量的起止时间

    开始日期: >select DATEADD(Day, 1 - DATEPART(Weekday,CONVERT(varchar(10), GETDATE() - 7, 120)), CONVER ...

  7. 用VS2013编译FFMPEG232

    http://blog.csdn.net/finewind/article/details/38854517 如果只是拿来使用,网上有现成的SDK.但我是想深入研究FFMPEG代码,又不熟悉Linux ...

  8. COS-7设备管理

    操作系统(Operating System,简称OS)是管理和控制计算机硬件与软件资源的计算机程序,是直接运行在“裸机”上的最基本的系统软件,任何其他软件都必须在操作系统的支持下才能运行.   操作系 ...

  9. 带SSL证书的httpclient 远程接口工具类

    package com.iups.wx.util; import java.io.IOException; import java.io.UnsupportedEncodingException; i ...

  10. Caffe2——C++ 预测(predict)Demo

    因为最近入坑Caffe2,它最近还一直在更新,所以坑比较多,官方也只给出了python的demo,C++的暂时还找不到,有也只有一个简单版的,不够用,所以就总结了一下,结合网上和自己的实践,整理了一下 ...