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. slide from one widget to another

    int main(int argc, char **argv) { QApplication app(argc, argv); QWidget panel; QVBoxLayout *l = new ...

  2. Shell-WEB目录监控

    #!/bin/sh #date:2015-12-08 #filename:check_webfile.sh #作者:李兴利 #Email:1162572407@qq.com #version:v1.1 ...

  3. SuperSocket快速入门（二）：启动程序以及相关的配置

    如何快速启动第一个程序 既然是快速入门,所以,对于太深奥的知识点将不做讲解,会在后续的高级应用章节中,会对SS进行拆解.所有的实例90%都是来自SS的实例,外加本人的注释进行讲解. 一般应用而言,你只 ...

  4. django: form fileupload - 2

    继续介绍文件上传的第二种形式和第三种形式. ------------------------------------------------------------- 第二种形式较简单,直接用 DB ...

  5. css3新增的背景属性

    有时候我们需要往边框文字上添加背景与背景图片的时候就有用处了 background的css3有两个新增属性分别是background-clip与background-origin;背景-修剪与背景起点 ...

  6. C#使用log4net

    C#很多异步机制使程序无法使用断点调试,这时候我们就需要使用日志输出.使用log4net一定要先引用net4log这个dll,不然无法使用. 作者很懒,直接上代码吧. using System; us ...

  7. HTML5 Canvas基础知识

    HTML5画布 1.创建一个画布         <canvas id="myCanvas" width="200" height="100&q ...

  8. VS2013配合EgretVS开发简单塔防游戏

    VS2013配合EgretVS开发简单塔防游戏(1) - 环境配置 VS2013配合EgretVS开发简单塔防游戏(2) – 原型设计 VS2013配合EgretVS开发简单塔防游戏(3) – 精灵动 ...

  9. mysql foreign key 外键

    ALTER TABLE `fd_rel_customer_doctor` ADD CONSTRAINT `FK_fd_rel_customer_doctor_1` FOREIGN KEY (`CUST ...

  10. Scala学习笔记--Akka

    待完成 http://www.gtan.com/akka_doc/ http://my.oschina.net/mingdong/blog/297972 http://www.jdon.com/con ...