`
hudeyong926
  • 浏览: 2032757 次
  • 来自: 武汉
社区版块
存档分类
最新评论

AngularJs 指令directive之transclude

 
阅读更多

transclude - 编译元素的内容,使它能够被directive所用。需要(在模版中)配合ngTransclude使用(引用)

先看例子,index.JS代码:

var appModule = angular.module('app', []);
appModule.directive('hello', function() {
    return {
        restrict: 'E',
        template: '<div>Hi there <span ng-transclude></span></div>',
        transclude: true
    };
});

 html

<html ng-app='app'>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<hello>
    <br/>
    <span>原始的内容,</span><br/>
    <span>还会在这里。</span>
</hello>
<hello>
</hello>
</body>

<script type="text/javascript" src="../vendor/angular/angular.js"></script>
<script type="text/javascript" src="app/index.js"></script>
</html>

 运行结果

 firebug再看页面代码变成了

<hello>
<div>Hi there 
<span ng-transclude="">
    <br/>
    <span>原始的内容,</span><br/>
    <span>还会在这里。</span>
</span>
</div>
</hello>
<hello <div="">Hi there 
<span ng-transclude="">
</span>
</hello>

 

  • 大小: 8 KB
分享到:
评论

相关推荐

    AngularJS中transclude用法详解

    AngularJS中的transclude是一个高级功能,主要用于将自定义指令的内容动态地插入到指令模板的指定位置,使得指令可以包含或包裹其他元素,同时保证这些元素的上下文作用域得到正确处理。通过使用transclude,开发者...

    angularjs-directive-workshop:JSSummit 的简单一步一步的 AngularJS 指令教程

    在这个"angularjs-directive-workshop"中,我们将深入探讨 AngularJS 的指令特性,这些是构建可复用、组件化的前端应用的关键工具。 指令是 AngularJS 的核心特性之一,它们允许我们扩展 HTML,添加自定义的行为和...

    理解AngularJs指令

    ### 理解AngularJS指令 AngularJS 是一款非常强大的前端框架,它的核心特性之一就是指令(Directives)。本文将详细介绍 AngularJS 指令的相关概念及其如何运作。 #### 一、指令概述 指令可以简单地理解为在特定 ...

    angularjs利用directive实现移动端自定义软键盘的示例

    `replace: true`指示Angular替换整个元素为模板内容,`transclude: true`则允许指令内部包含父元素的内容。 指令的模板定义了一个简单的`&lt;input&gt;`元素,这个元素将用于显示用户输入的值。`link`函数是`directive`...

    学习AngularJS-1.x.pdf

    * transclude 指令:在Directive之间传递数据 十二、总结 * 学习AngularJS的经验和教训 * 如何继续深入学习AngularJS 十三、深入学习AngularJS * Directive的制作和使用 * AngularJS的性能优化 * AngularJS的...

    AngularJS 指令的交互详解及实例代码

    1. **AngularJS 指令的创建与基本结构**:文档提到了如何创建基本的AngularJS指令,这涉及到AngularJS模块的创建以及使用module.directive()方法定义指令。每个指令都有其自己的配置对象,其中包括了定义指令行为的...

    angularjs-directives:其他 AngularJS 指令

    AngularJS 的指令是框架的核心组件之一,它们扩展了 HTML,赋予其新的行为。 一、AngularJS 指令概述 AngularJS 指令是用于在 HTML 元素上添加特定功能的特殊属性。它们以 `ng-` 前缀开头,如 `ng-repeat`, `ng-...

    详解angularJS自定义指令间的相互交互

    AngularJS 自定义指令 transclude:当元素标签需要嵌套时使用,与ng-transclude配合使用。默认值为false不能使用嵌套,true为可以使用嵌套。在哪个标签上使用ng-transclude就在哪个标签内进行嵌套。 代码示例:...

    AngularJS 自定义指令详解及实例代码

    AngularJS是一个强大的前端JavaScript框架,其核心特性之一就是自定义指令。自定义指令允许开发者扩展HTML,创建新的元素或属性,以实现特定的功能。在本文中,我们将深入探讨AngularJS自定义指令的创建、使用以及...

    angular.js指令中transclude选项及ng-transclude指令详解

    在Angular.js中,指令(Directives)是构造AngularJS应用的一个核心特性,它允许开发者通过自定义HTML标签来扩展HTML的功能。在指令开发中,一个常用而强大的选项就是transclude。 在Angular.js中,transclude选项...

    Angular之指令Directive用法详解

    1. `ng-app`:这个指令用于启动Angular应用,它定义了AngularJS作用域的起点。例如,在`&lt;html ng-app="myApp"&gt;`中,`myApp`就是应用的名称。 2. `ng-repeat`:这是一个迭代器,它可以将数组中的每个元素映射到HTML...

    最新AngularJS开发宝典视频教程 后盾网AngularJS培训视频教程 后盾网.txt

    ├最新AngularJS开发宝典—第046讲 自定义指令directive的restrict属性说明.mp4 ├最新AngularJS开发宝典—第047讲 自定义指令名称的标准规范.mp4 ├最新AngularJS开发宝典—第048讲 自定义指令template函数式操作...

    AngularJS directive返回对象属性详解

    AngularJS指令返回对象属性的详解,让我们了解了如何创建和配置指令,以及如何控制指令的行为和外观。掌握这些知识能够帮助我们更好地构建结构化的Web应用,并且使我们能够更加高效地利用AngularJS框架提供的强大...

    AngularJS自定义指令之复制指令实现方法

    接着,我们通过`app.directive('duplicate', function($rootScope){...})`定义了`duplicate`指令。这个函数接收一个 `$rootScope` 作为参数,它代表应用的根作用域,我们在指令的链接函数中会用到它。 在返回的对象...

    用AngularJS的指令实现tabs切换效果

    ### AngularJS指令实现Tab切换 #### 1. 指令嵌套 指令嵌套是AngularJS中一个重要的概念,它允许开发者将多个指令组合在一起,实现复杂的DOM结构。在这个例子中,`myTabs`作为最外层的指令,可以嵌套`myPane`指令,...

    AngularJS自定义指令详解(有分页插件代码)

    在AngularJS中,自定义指令是扩展框架功能的关键机制,允许开发者创建可重用的UI组件和行为。本文将深入探讨如何创建和使用自定义指令,以及如何利用它实现分页功能。 首先,创建自定义指令是通过调用`angular....

    mastering-angularjs-directives:有关AngularJS自定义指令的示例

    在AngularJS中,自定义指令是框架的核心特性之一,它允许开发者扩展HTML的功能,创建新的DOM元素或修改已有元素的行为。本项目“mastering-angularjs-directives”显然是一个专注于讲解和展示AngularJS自定义指令...

Global site tag (gtag.js) - Google Analytics