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. Droppable(放置)组件

    ．加载方式 //class 加载方式 <div id="dd" class="easyui-droppable" data-options="a ...

  2. 关于C#中的抽象类、抽象方法和虚方法的探究

    2016年的第一篇文章,容我先喷喷新年的情怀,..........,好了,喷的差不多了. 在面向对象中,我们需要对类进行横向和纵向的认识,不同的类有不同特色的成员,同时在不同类的继承中,子类获得父类的 ...

  3. 解决：用PivotGridControl 与 chartControl 配合使用，Series最大只显示10条

    修改 PivotGridControl  控件的 OptionsChartDataSource.MaxAllowedSeriesCount 的值就可以了  默认为10条

  4. 腾讯RTX登录提示失败问题及处理办法

    出现问题时图片: 解决步骤: 首先ping一下RTX管理器所在的的ip地址 telnet一下服务器的端口 8000,8010 是否能通. 具体操作: 在无法登陆的客户端电脑上开始-运行-输入cmd 确 ...

  5. [BZOJ]3643 Phi的反函数

    我承认开这篇文章只是因为好笑…… 估计Zky神看见3737会很郁闷吧. http://www.lydsy.com/JudgeOnline/problem.php?id=3643 本来想直接交3737改 ...

  6. uva 105 - The Skyline Problem

    一.用数组储存该位置的最高点即可(图形的连续点离散化),注意左边界及右边界的情况: 注意:无论建筑物最左边是盖到哪里,你都得从1开始输出(输入输出都是integer,所以才能离散化): #includ ...

  7. HIVE快速入门

    (一)简单入门 1.创建一个表 create table if not exists ljh_emp( name string, salary float, gender string) commen ...

  8. .cshrc

    使用set和setenv命令可以设置shell选项或者列出shell变量 在C Shell 里, set 定义局部变量, setenv定义全局变量   1.set   set 变量名 ＝ 内容: s2 ...

  9. NET SignalR 与 LayIM2.0

    ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(五) 之 加好友,加群流程,消息管理和即时消息提示的实现   前言 前前一篇留了个小问题,在上一篇中忘了写了,就是关于L ...

  10. php 过滤html标签的函数

    1:strip_tags(string,allow)用来过滤html标签,参数string必须,allow是指定允许哪些标签通过. 例如: <?php $info='<a href=&qu ...