From 6d9768b337310fa80e348ed5da12d0547f5a5a52 Mon Sep 17 00:00:00 2001 From: Stephen Feest Date: Wed, 17 Aug 2016 10:03:38 +0100 Subject: [PATCH 1/2] Add additional $transclude function parameters A couple of additional optional parameters were added to the `$transclude` function when support for multi-slot transclusion was added in Angular 1.5 [1]. This commit updates the `ITranscludeFunction` type definition to reflect those changes. [1] https://docs.angularjs.org/api/ng/service/$compile#-controller- --- angularjs/angular.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angularjs/angular.d.ts b/angularjs/angular.d.ts index 3c13fd6cf3..a6a130a66d 100644 --- a/angularjs/angular.d.ts +++ b/angularjs/angular.d.ts @@ -1258,7 +1258,7 @@ declare namespace angular { // This corresponds to $transclude (and also the transclude function passed to link). interface ITranscludeFunction { // If the scope is provided, then the cloneAttachFn must be as well. - (scope: IScope, cloneAttachFn: ICloneAttachFunction): JQuery; + (scope: IScope, cloneAttachFn: ICloneAttachFunction, futureParentElement?: JQuery, slotName?: string): JQuery; // If one argument is provided, then it's assumed to be the cloneAttachFn. (cloneAttachFn?: ICloneAttachFunction): JQuery; } From ed50b4775d7d49a44d3d39d103aa4f50d3442174 Mon Sep 17 00:00:00 2001 From: Stephen Feest Date: Wed, 17 Aug 2016 21:35:36 +0100 Subject: [PATCH 2/2] Add $transclude function tests These tests try to exercise the different ways that the $transclude can be called including: + With and without specifying the scope explicitly + With and without a clone attach function + With and without specifying the future parent + Using the default and named transclude slots --- angularjs/angular-tests.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/angularjs/angular-tests.ts b/angularjs/angular-tests.ts index ef3e29b4c8..07f67a7375 100644 --- a/angularjs/angular-tests.ts +++ b/angularjs/angular-tests.ts @@ -867,6 +867,26 @@ angular.module('docsTabsExample', []) }; }); +angular.module('multiSlotTranscludeExample', []) + .directive('dropDownMenu', function() { + return { + transclude: { + button: 'button', + list: 'ul', + }, + link: function(scope, element, attrs, ctrl, transclude) { + // without scope + transclude().appendTo(element); + transclude(clone => clone.appendTo(element)); + + // with scope + transclude(scope, clone => clone.appendTo(element)); + transclude(scope, clone => clone.appendTo(element), element, 'button'); + transclude(scope, null, element, 'list').addClass('drop-down-list').appendTo(element); + } + }; + }); + angular.module('componentExample', []) .component('counter', { require: {'ctrl': '^ctrl'},