feat(ngUpgrade): transclude content from ng2->ng1

mhevery · mhevery · commit 19c1bd73752f · 2015-10-09T21:41:56.000-07:00
Closes angular#4640
diff --git 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
@@ -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
@@ -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(' }}<ng1></ng1>{{ ')' }}`,
-                         directives: [upgradeModule.exportAsNg2Component('ng1')]
+                         template: `{{ 'ng2(' }}<ng1>{{'transclude'}}</ng1>{{ ')' }}`,
+                         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" }}(<ng-transclude></ng-transclude>)'};
+         });
+         upgrMod.importNg2Component(Ng2);
 
          var element = html("<div>{{'ng1('}}<ng2-1></ng2-1>{{')'}}</div>");
 
-         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();
          });
        }));
