[AngularJS] Angular 1.5 multiple transclude

Posted 2020-06-24 Answer1215

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[AngularJS] Angular 1.5 multiple transclude相关的知识，希望对你有一定的参考价值。

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:

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

app.controller(‘AppCtrl‘, function() {
    this.detail = {
        title: "Detail title",
        text: "Text Content",
        image: "Image Content"
    };
});

app.component(‘detailContentImage‘, {
    bindings: {
        message: ‘<‘ // one time binding
    },
    controller: function () {
    },
    controllerAs: ‘vm‘,
    template: ‘<h2>{{vm.message}}</h2>‘
});

app.component(‘detailContentText‘, {
    bindings: {
        message: ‘<‘
    },
    controller: function () {
    },
    controllerAs: ‘vm‘,
    template: ‘<h3>{{vm.message}}</h3>‘
});

app.component(‘detailTitle‘, {
    bindings: {
        message: ‘<‘
    },
    controller: function () {
    },
    controllerAs: ‘vm‘,
    template: ‘<span>{{vm.message}}</span>‘
});

app.component(‘ngDetails‘, {
    bindings: {data: ‘<‘},
    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(‘‘)
});

<!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-controller="AppCtrl as main">
<ng-details>
    <detail-title message="main.detail.title"></detail-title>
    <detail-content-text message="main.detail.text"></detail-content-text>
    <detail-content-image message="main.detail.image"></detail-content-image>
</ng-details>
</body>
</html>

以上是关于[AngularJS] Angular 1.5 multiple transclude的主要内容，如果未能解决你的问题，请参考以下文章

angularJS 1.5 嵌套组件

Typescript 和 AngularJS 1.5：如何处理导出类

使用 Laravel 5.3 和 AngularJS 1.5 的路线行为不端

requirejs 和 angularjs 1.5 注入 ui.router 组件失败

在 Angular 1.5 组件中使用 ControllerAs

Angular 1.5 组件路由器兄弟组件