From 781aac7d5b18a63cccc5a57bfd1f3bbb642c7171 Mon Sep 17 00:00:00 2001 From: Nick Bolles Date: Tue, 3 May 2016 10:27:35 -0500 Subject: [PATCH 1/3] Update ngTranscludeMod.js to be angular 1.5 compatable Angular 1.5 introduces Multi Slot transclusion, which this version hid. This makes it compatible. 'parent' or 'child' may not be used as slot names, and to combine 'parent' with a slot name use the ng-transclude-slot attribute https://github.com/angular/angular.js/commit/a4ada8ba9c4358273575e16778e76446ad080054#comments https://docs.angularjs.org/api/ng/directive/ngTransclude#multi-slot-transclusion https://docs.angularjs.org/api/ng/service/$compile#transclusion --- ngTranscludeMod.js | 105 +++++++++++++++++++++++++++------------------ 1 file changed, 63 insertions(+), 42 deletions(-) diff --git a/ngTranscludeMod.js b/ngTranscludeMod.js index 5f1f9bf..2cb1102 100644 --- a/ngTranscludeMod.js +++ b/ngTranscludeMod.js @@ -1,51 +1,72 @@ -angular.module( 'ngTranscludeMod', [] ) +angular.module('ngTranscludeMod', []) + .config([ + '$provide', function ($provide) { + $provide.decorator('ngTranscludeDirective', [ + '$delegate', function ($delegate) { + // Remove the original directive + $delegate.shift(); + return $delegate; + } + ]); + } + ]) + .directive('ngTransclude', function () { + return { + restrict: 'EAC', + replace: true, + link: function ($scope, $element, $attrs, controller, $transclude) { -.config(['$provide', function($provide) { - $provide.decorator('ngTranscludeDirective', ['$delegate', function($delegate) { - // Remove the original directive - $delegate.shift(); - return $delegate; - }]); -}]) + var types = ['child', 'parent', 'sibling']; + var iScopeType = types[types.indexOf($attrs.ngTransclude)] || undefined; -.directive( 'ngTransclude', function() { - return { - restrict: 'EAC', - link: function( $scope, $element, $attrs, controller, $transclude ) { - if (!$transclude) { - throw minErr('ngTransclude')('orphan', + if ($attrs.ngTransclude === $attrs.$attr.ngTransclude || iScopeType) { + // If the attribute is of the form: `ng-transclude="ng-transclude"` + // then treat it like the default + $attrs.ngTransclude = ''; + } + + if (!$transclude) { + throw minErr('ngTransclude')('orphan', 'Illegal use of ngTransclude directive in the template! ' + 'No parent directive that requires a transclusion found. ' + 'Element: {0}', - startingTag($element) ); - } + startingTag($element)); + } - var iScopeType = $attrs['ngTransclude'] || 'sibling'; - switch ( iScopeType ) { - case 'sibling': - $transclude( function( clone ) { - $element.empty(); - $element.append( clone ); - }); - break; - case 'parent': - $transclude( $scope, function( clone ) { - $element.empty(); - $element.append( clone ); - }); - break; - case 'child': - var iChildScope = $scope.$new(); - $transclude( iChildScope, function( clone ) { - $element.empty(); - $element.append( clone ); - $element.on( '$destroy', function() { - iChildScope.$destroy(); - }); - }); - break; + //default function for transclude (same as 'sibling') + var ngTranscludeScope; + // If there is no slot name defined or the slot name is not optional + // then transclude the slot + var ngTranscludeSlotName = $attrs.ngTransclude || $attrs.ngTranscludeSlot; + var ngTranscludeCloneAttachFn = function (clone) { + if (clone.length) { + $element.empty(); + $element.append(clone); } + }; + + switch (iScopeType) { + case 'parent': + ngTranscludeScope = $scope; + break; + case 'child': + ngTranscludeScope = $scope.$new(); + ngTranscludeCloneAttachFn = function (clone) { + $element.empty(); + $element.append(clone); + $element.on('$destroy', function () { + ngTranscludeScope.$destroy(); + }); + }; + break; + } + //Scope cant be null + if (ngTranscludeScope) { + $transclude(ngTranscludeScope, ngTranscludeCloneAttachFn, null, ngTranscludeSlotName); + } else { + $transclude(ngTranscludeCloneAttachFn, null, ngTranscludeSlotName); + } } - } -}); \ No newline at end of file + }; + }); From ae92916feea924830eca15167dbe02cf164e3c8c Mon Sep 17 00:00:00 2001 From: Nick Bolles Date: Tue, 3 May 2016 10:38:32 -0500 Subject: [PATCH 2/3] Update readme to show plunker --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 678da86..9db94bc 100644 --- a/README.md +++ b/README.md @@ -2,3 +2,8 @@ ngTranscludeMod ============== A modification adding features to Angular's ngTransclude + +This branch allows for angular 1.5 multi-slot-transclusion + +Here is a plunker displaying all the different types of transclusion options +http://plnkr.co/edit/5XGBEX0muH9CSijMfWsH?p=preview From 55bb39e71b9e033171370e4a5b83281fbb8e4975 Mon Sep 17 00:00:00 2001 From: Nick Bolles Date: Tue, 3 May 2016 10:38:46 -0500 Subject: [PATCH 3/3] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 9db94bc..1630cfc 100644 --- a/README.md +++ b/README.md @@ -6,4 +6,5 @@ A modification adding features to Angular's ngTransclude This branch allows for angular 1.5 multi-slot-transclusion Here is a plunker displaying all the different types of transclusion options + http://plnkr.co/edit/5XGBEX0muH9CSijMfWsH?p=preview