标签：
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 ? \‘▾\‘ : \‘▸\‘ }}‘, ‘<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 ? \‘▾\‘ : \‘▸\‘ }}‘, ‘<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 ? \‘▾\‘ : \‘▸\‘ }}‘, ‘<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
标签：
原文地址：http://www.cnblogs.com/Answer1215/p/5285922.html
