diff --git a/modules/upgrade/src/angular.d.ts b/modules/upgrade/src/angular.d.ts index 03b7921843..e6013f0a49 100644 --- a/modules/upgrade/src/angular.d.ts +++ b/modules/upgrade/src/angular.d.ts @@ -7,7 +7,14 @@ declare namespace angular { run(a: any); } interface ICompileService { - (element: Element): (IScope) => void; + (element: Element, transclude?: Function): ILinkFn; + } + interface ILinkFn { + (scope: IScope, cloneAttachFn?: Function, options?: ILinkFnOptions): void + } + interface ILinkFnOptions { + parentBoundTranscludeFn?: Function, transcludeControllers?: {[key: string]: any}, + futureParentElement?: Node } interface IRootScopeService { $new(): IScope; diff --git a/modules/upgrade/src/ng1_facade.ts b/modules/upgrade/src/ng1_facade.ts index 92da15ea2e..87d4d8ffdd 100644 --- a/modules/upgrade/src/ng1_facade.ts +++ b/modules/upgrade/src/ng1_facade.ts @@ -112,8 +112,16 @@ class Ng1ComponentFacade implements OnChanges, DoCheck { private inputs: string[], private outputs: string[], private propOuts: string[], private checkProperties: string[], private propertyMap: {[key: string]: string}) { var chailTail = scope.$$childTail; // remember where the next scope is inserted - compile(elementRef.nativeElement)(scope); - + var element: Element = elementRef.nativeElement; + var childNodes: Node[] = []; + var childNode; + while (childNode = element.firstChild) { + element.removeChild(childNode); + childNodes.push(childNode); + } + element.appendChild(element.ownerDocument.createElement('ng-transclude')); + compile(element)(scope, null, + {parentBoundTranscludeFn: (scope, cloneAttach) => cloneAttach(childNodes)}); // If we are first scope take it, otherwise take the next one in list. this.componentScope = chailTail ? chailTail.$$nextSibling : scope.$$childHead; diff --git a/modules/upgrade/test/integration_spec.ts b/modules/upgrade/test/integration_spec.ts index 2d204359d1..6a757f3041 100644 --- a/modules/upgrade/test/integration_spec.ts +++ b/modules/upgrade/test/integration_spec.ts @@ -34,24 +34,26 @@ export function main() { }); })); - it('should instantiate ng1 in ng2 template', inject([AsyncTestCompleter], (async) => { - var upgradeModule: UpgradeModule = createUpgradeModule(); + it('should instantiate ng1 in ng2 template and project content', + inject([AsyncTestCompleter], (async) => { + var upgrMod: UpgradeModule = createUpgradeModule(); var Ng2 = Component({selector: 'ng2-1'}) .View({ - template: `{{ 'ng2(' }}{{ ')' }}`, - directives: [upgradeModule.exportAsNg2Component('ng1')] + template: `{{ 'ng2(' }}{{'transclude'}}{{ ')' }}`, + directives: [upgrMod.exportAsNg2Component('ng1')] }) .Class({constructor: function() {}}); - upgradeModule.ng1Module.directive('ng1', - () => { return {template: 'ng1 {{ "WORKS" }}!'}; }); - upgradeModule.importNg2Component(Ng2); + upgrMod.ng1Module.directive('ng1', () => { + return {transclude: true, template: '{{ "ng1" }}()'}; + }); + upgrMod.importNg2Component(Ng2); var element = html("
{{'ng1('}}{{')'}}
"); - upgradeModule.bootstrap(element).ready(() => { - expect(document.body.textContent).toEqual("ng1(ng2(ng1 WORKS!))"); + upgrMod.bootstrap(element).ready(() => { + expect(document.body.textContent).toEqual("ng1(ng2(ng1(transclude)))"); async.done(); }); }));