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. c#中从string数组转换到int数组

    以前一直有一个数组之间转换的东西,可是忘记了,今天也是找了好久也没有解决,最后用这种方法解决了,分享给大家. " }; int[] output = Array.ConvertAll< ...

  2. ViewPager切换动画PageTransformer使用

    Android从3.0开始,就添加了很多动画,ViewPager当然也不例外,相对于非常平庸的默认切换动画,Google给我们展示了两个动画例子:DepthPageTransformer和ZoomOu ...

  3. linux防火墙开启-关闭

    1.永久性生效,重启后不会复原 开启: chkconfig iptables on 关闭: chkconfig iptables off 2. 即时生效,重启后复原 开启: service iptab ...

  4. Ajax&XMLHttpRequest

    XMLHttpRequest 简单省力的方法 将文件编码成base64通过Ajax上传 HTML5学习之FileReader接口 HTML5学习之FileReader接口 通过Ajax方式上传文件,使 ...

  5. Linux的VI/VIM

    参考自:http://www.cnblogs.com/itech/archive/2009/04/17/1438439.html 作者:iTech 出处:http://itech.cnblogs.co ...

  6. jquery之onchange事件2

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  7. 网页CSS

    CSS 样式表,(分三类:内联.内嵌.外部) 1,内联, 直接作于于 元素 例:   <p style="font-size:14px;"> 2,内嵌 作用于网页 首先 ...

  8. 为什么class中属性以空格分隔？

    1 div.contain .blue{color:blue;}/*后代选择器*/2 div.contain.blue{color:blue;} /*多类选择器*/ 以上两种规则分别应用的元素如下: ...

  9. linux下面安装配置LAMP环境

    以centos下面为例.初学者.东西基本都是各个地方找来的.自己手写了一遍.应该印象会很深刻 首先切换到超级管理员模式 1.安装php 一路选择y就行了 安装一些php的扩展 yum -y insta ...

  10. python 查看插件命令 pip freeze 以及django3.4链接mysql

    https://github.com/PyMySQL/PyMySQL/issues/244 pip freeze命令可以显示python插件版本 MySQLdb只支持Python2.*,还不支持3.* ...