fix(upgrade): allow functions for template and templateUrl (#9022)

angular · Jun 5, 2016 · a19c4e8 · a19c4e8
1 parent 53083c0
commit a19c4e8
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 2 deletions.
diff --git a/modules/@angular/upgrade/src/upgrade_ng1_adapter.ts b/modules/@angular/upgrade/src/upgrade_ng1_adapter.ts
@@ -133,9 +133,9 @@ export class UpgradeNg1ComponentAdapterBuilder {
   compileTemplate(compile: angular.ICompileService, templateCache: angular.ITemplateCacheService,
                   httpBackend: angular.IHttpBackendService): Promise<any> {
     if (this.directive.template !== undefined) {
-      this.linkFn = compileHtml(this.directive.template);
+      this.linkFn = compileHtml(typeof this.directive.template === 'function' ? this.directive.template() : this.directive.template);
     } else if (this.directive.templateUrl) {
-      var url = this.directive.templateUrl;
+      var url = typeof this.directive.templateUrl === 'function' ? this.directive.templateUrl() : this.directive.templateUrl;
       var html = templateCache.get(url);
       if (html !== undefined) {
         this.linkFn = compileHtml(html);

diff --git a/modules/@angular/upgrade/test/upgrade_spec.ts b/modules/@angular/upgrade/test/upgrade_spec.ts
@@ -430,6 +430,30 @@ export function main() {
                });
          }));
 
+      it('should support templateUrl as a function',
+         inject([AsyncTestCompleter], (async) => {
+           var adapter = new UpgradeAdapter();
+           var ng1Module = angular.module('ng1', []);
+           ng1Module.value('$httpBackend',
+                           (method, url, post, cbFn) => { cbFn(200, `${method}:${url}`); });
+
+           var ng1 = function() { return {templateUrl(){ return 'url.html' }}; };
+           ng1Module.directive('ng1', ng1);
+           var Ng2 = Component({
+                       selector: 'ng2',
+                       template: '<ng1></ng1>',
+                       directives: [adapter.upgradeNg1Component('ng1')]
+                     }).Class({constructor: function() {}});
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           var element = html(`<div><ng2></ng2></div>`);
+           adapter.bootstrap(element, ['ng1'])
+               .ready((ref) => {
+                 expect(multiTrim(document.body.textContent)).toEqual('GET:url.html');
+                 ref.dispose();
+                 async.done();
+               });
+         }));
+
       it('should support empty template', inject([AsyncTestCompleter], (async) => {
            var adapter = new UpgradeAdapter();
            var ng1Module = angular.module('ng1', []);
@@ -451,6 +475,27 @@ export function main() {
                });
          }));
 
+      it('should support template as a function', inject([AsyncTestCompleter], (async) => {
+           var adapter = new UpgradeAdapter();
+           var ng1Module = angular.module('ng1', []);
+
+           var ng1 = function() { return {template(){ return '' }}; };
+           ng1Module.directive('ng1', ng1);
+           var Ng2 = Component({
+                       selector: 'ng2',
+                       template: '<ng1></ng1>',
+                       directives: [adapter.upgradeNg1Component('ng1')]
+                     }).Class({constructor: function() {}});
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           var element = html(`<div><ng2></ng2></div>`);
+           adapter.bootstrap(element, ['ng1'])
+               .ready((ref) => {
+                 expect(multiTrim(document.body.textContent)).toEqual('');
+                 ref.dispose();
+                 async.done();
+               });
+         }));
+
       it('should support templateUrl fetched from $templateCache',
          inject([AsyncTestCompleter], (async) => {
            var adapter = new UpgradeAdapter();