feat(upgrade): support $element in upgraded component template/templateUrl functions (#31637)

bamblack · mhevery · commit 29e1c53a3140 · 2019-07-24T14:34:20.000-07:00
PR Close #31637
diff --git a/packages/upgrade/src/common/src/upgrade_helper.ts b/packages/upgrade/src/common/src/upgrade_helper.ts
@@ -71,13 +71,13 @@ export class UpgradeHelper {
   }
 
   static getTemplate(
-      $injector: IInjectorService, directive: IDirective, fetchRemoteTemplate = false): string
-      |Promise<string> {
+      $injector: IInjectorService, directive: IDirective, fetchRemoteTemplate = false,
+      $element?: IAugmentedJQuery): string|Promise<string> {
     if (directive.template !== undefined) {
-      return getOrCall<string>(directive.template);
+      return getOrCall<string>(directive.template, $element);
     } else if (directive.templateUrl) {
       const $templateCache = $injector.get($TEMPLATE_CACHE) as ITemplateCacheService;
-      const url = getOrCall<string>(directive.templateUrl);
+      const url = getOrCall<string>(directive.templateUrl, $element);
       const template = $templateCache.get(url);
 
       if (template !== undefined) {
@@ -114,7 +114,8 @@ export class UpgradeHelper {
 
   compileTemplate(template?: string): ILinkFn {
     if (template === undefined) {
-      template = UpgradeHelper.getTemplate(this.$injector, this.directive) as string;
+      template =
+          UpgradeHelper.getTemplate(this.$injector, this.directive, false, this.$element) as string;
     }
 
     return this.compileHtml(template);
@@ -304,8 +305,8 @@ export class UpgradeHelper {
   }
 }
 
-function getOrCall<T>(property: T | Function): T {
-  return isFunction(property) ? property() : property;
+function getOrCall<T>(property: T | Function, ...args: any[]): T {
+  return isFunction(property) ? property(...args) : property;
 }
 
 // NOTE: Only works for `typeof T !== 'object'`.
diff --git a/packages/upgrade/static/test/integration/upgrade_component_spec.ts b/packages/upgrade/static/test/integration/upgrade_component_spec.ts
@@ -106,12 +106,12 @@ withEachNg1Version(() => {
            });
          }));
 
-      it('should support not pass any arguments to `template` function', async(() => {
+      it('should pass $element to `template` function and not $attrs', async(() => {
            // Define `ng1Component`
            const ng1Component: angular.IComponent = {
              template: ($attrs: angular.IAttributes, $element: angular.IAugmentedJQuery) => {
                expect($attrs).toBeUndefined();
-               expect($element).toBeUndefined();
+               expect($element).toBeDefined();
 
                return 'Hello, Angular!';
              }
@@ -241,12 +241,12 @@ withEachNg1Version(() => {
            });
          }));
 
-      it('should support not pass any arguments to `templateUrl` function', async(() => {
+      it('should pass $element to `templateUrl` function and not $attrs', async(() => {
            // Define `ng1Component`
            const ng1Component: angular.IComponent = {
              templateUrl: ($attrs: angular.IAttributes, $element: angular.IAugmentedJQuery) => {
                expect($attrs).toBeUndefined();
-               expect($element).toBeUndefined();
+               expect($element).toBeDefined();
 
                return 'ng1.component.html';
              }
