If you know ui-router, multi-transclude should be easy for you also. In previou Angular version <1.4, one diretive can only have one transclude element. But now in Angular 1.5, you can give each transclude element a name, then you can have multi-transcluded elements.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="node_modules/angular/angular.min.js"></script>

    <script src="app.js"></script>

</head>

<body ng-app="app">

<ng-details>

    <detail-title>Details</detail-title>

    <detail-content-text >This is text content</detail-content-text>

</ng-details>

</body>

</html>
var app = angular.module('app', []);

app.directive('ngDetails', function () {

    return {

        restrict: 'E',

        scope: {},

        transclude: {

            'title': 'detailTitle', // title: used in directive template, detailTitle: used in app html

            'textContent': 'detailContentText'

        },

        controller: function(){

            this.toggle = true;

            this.toggleIt = function(){

                this.toggle = !this.toggle;

            }

        },

        controllerAs: 'vm',

        template: [

            '<div class="details">',

                '<div class="summary" ng-click="open = !open">',

                    '{{ open ? \'&blacktriangledown;\' : \'&blacktriangleright;\' }}',

                    '<span ng-transclude="title">default title</span>',

                '</div>',

                '<div class="content" ng-if="vm.toggle" ng-show="open" ng-transclude="textContent">default text</div>',

            '</div>'

        ].join('')

    };

});

This can make html code lot more easy to follow.

Another benefit is we can choose which element to be transcluded into our template:

<ng-details>

    <detail-title>Details</detail-title>

    <detail-content-text >This is text content</detail-content-text>

    <detail-content-image >Sorry there is no image</detail-content-image>

</ng-details>

In app html, we add one more transclude element: detail-content-image, but it is not yet showing on the page.

var app = angular.module('app', []);

app.directive('ngDetails', function () {

    return {

        restrict: 'E',

        scope: {},

        transclude: {

            'title': 'detailTitle',

            'textContent': 'detailContentText',

            'imageContent': 'detailContentImage',

        },

        controller: function(){

            this.toggle = true;

            this.toggleIt = function(){

                this.toggle = !this.toggle;

            }

        },

        controllerAs: 'vm',

        template: [

            '<div class="details">',

                '<div class="summary" ng-click="open = !open">',

                    '{{ open ? \'&blacktriangledown;\' : \'&blacktriangleright;\' }}',

                    '<span ng-transclude="title">default title</span>',

                '</div>',

                '<div class="content" ng-if="vm.toggle" ng-show="open" ng-transclude="textContent">default text</div>',

                '<div class="content" ng-if="!vm.toggle" ng-show="open" ng-transclude="imageContent">default image</div>',

            '</div>',

            '<button ng-click="vm.toggleIt()">Toggle it: {{vm.toggle}}</button>'

        ].join('')

    };

});

So, based on the toggle button, the template can choose which element to transclude into the template.

---------------------------------

Component refactor:

[AngularJS] Angular 1.5 multiple transclude的更多相关文章

  1. [AngularJS] Angular 1.5 $transclude with named slot

    In Angular 1.5, there is no link and compile. So use if you transclude, you cannot access the fifth ...

  2. angular 自定义指令 directive transclude 理解

    项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...

  3. 浅析AngularJS自定义指令之嵌入(transclude)

    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...

  4. [AngularJS] Angular 1.3 Anuglar hint

    Read More: http://www.linkplugapp.com/a/953215 https://docs.google.com/document/d/1XXMvReO8-Awi1EZXA ...

  5. AngularJS学习---Routing(路由) & Multiple Views(多个视图) step 7

    1.切换分支到step7,并启动项目 git checkout step- npm start 2.需求: 在步骤7之前,应用只给我们的用户提供了一个简单的界面(一张所有手机的列表),并且所有的模板代 ...

  6. [Angularjs]angular ng-repeat与js特效加载先后导致的问题

    写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效 ...

  7. angular高级篇之transclude使用详解

    angular指令的transclude属性是一个让初学者比较难以理解的地方,transclude可以设置为false(默认),true或者对象三种值,如果不设该属性就默认为false,也就是说你不需 ...

  8. [AngularJS] Angular 1.3 ngMessages with ngAnimate

    Note: Can use $dirty to check whether user has intracted with the form: https://docs.angularjs.org/a ...

  9. [AngularJS] Angular 1.3 $submitted for Form in Angular

    AngularJS 1.3 add $submitted for form, so you can use  $submitted  to track whether the submit event ...

随机推荐

  1. Foreach语法

    先看例子: Random rand = new Random(47); float f[] = new float[10]; for(int i = 0; i < 10; i++){ f[i] ...

  2. iOS避免键盘遮挡输入方案

    项目中经常会遇到这样的问题:一个tableView中有大量的textField,当点击屏幕底部的textfield时,由于键盘弹出挡住了textfield输入框里的内容,造成很差的用户体验,如下图,点 ...

  3. C#异步编程的实现方式——ThreadPool线程池

    在需要创建的线程很多,且都是比较小的线程的情况下,可以使用线程池(ThreadPool类).ThreadPool是一个静态方法,提供了对一个线程集合的操作,它会在线程数不足时增加线程,空闲线程数过多时 ...

  4. Android-操作栏之图标导航

    想实现图标向上导航功能,步子分两步走: 1.样式上要改变-->图标要变成可点击的按钮,并有一个向左的箭头. 2.功能上要实现-->实现向上导航 首先谈第一步: 对于拥有fragment的a ...

  5. SqlServer死锁与阻塞检测脚本

    IF EXISTS (SELECT * FROM sysobjects WHERE [name] = 'sp_Lock_Scan') DROP PROCEDURE sp_Lock_Scan GO CR ...

  6. .net web api 的route理解

    .NET web api 的特性是和MVC一样,通过Route 来控制action的访问方式.Route匹配规则是个奇特的方式,首先看一段Route的模板 Routes.MapHttpRoute( n ...

  7. 什么是 Terminal

    从用户的角度来看,Terminal 是键盘和显示器的组合,也称为 TTY(电传打字机的缩写).键盘输入字符,显示器显示字符. 从进程的角度来看,终端是字符设备,可以通过 read.write.ioct ...

  8. C#高级知识点概要(3) - 特性、自动属性、对象集合初始化器、扩展方法、Lambda表达式和Linq查询

    1.特性(Attributes) 特性(Attributes),MSDN的定义是:公共语言运行时允许你添加类似关键字的描述声明,叫做attributes, 它对程序中的元素进行标注,如类型.字段.方法 ...

  9. JS将毫秒转换成时间格式

    JavaScript Date(日期)对象 实例 getTime():返回从 1970 年 1 月 1 日至今的毫秒数. setFullYear(): 设置具体的日期. toUTCString():将 ...

  10. css应用三

    1. Padding与margin Padding为内边距,padding值会计算在width和height之内.如:width:100px:height:100px:padding:10px:该di ...