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

PR Close #31637
This commit is contained in:
Ben Black 2019-07-18 16:48:28 -04:00 committed by Miško Hevery
parent 87ce4e997b
commit 29e1c53a31
2 changed files with 12 additions and 11 deletions

View File

@ -71,13 +71,13 @@ export class UpgradeHelper {
} }
static getTemplate( static getTemplate(
$injector: IInjectorService, directive: IDirective, fetchRemoteTemplate = false): string $injector: IInjectorService, directive: IDirective, fetchRemoteTemplate = false,
|Promise<string> { $element?: IAugmentedJQuery): string|Promise<string> {
if (directive.template !== undefined) { if (directive.template !== undefined) {
return getOrCall<string>(directive.template); return getOrCall<string>(directive.template, $element);
} else if (directive.templateUrl) { } else if (directive.templateUrl) {
const $templateCache = $injector.get($TEMPLATE_CACHE) as ITemplateCacheService; 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); const template = $templateCache.get(url);
if (template !== undefined) { if (template !== undefined) {
@ -114,7 +114,8 @@ export class UpgradeHelper {
compileTemplate(template?: string): ILinkFn { compileTemplate(template?: string): ILinkFn {
if (template === undefined) { 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); return this.compileHtml(template);
@ -304,8 +305,8 @@ export class UpgradeHelper {
} }
} }
function getOrCall<T>(property: T | Function): T { function getOrCall<T>(property: T | Function, ...args: any[]): T {
return isFunction(property) ? property() : property; return isFunction(property) ? property(...args) : property;
} }
// NOTE: Only works for `typeof T !== 'object'`. // NOTE: Only works for `typeof T !== 'object'`.

View File

@ -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` // Define `ng1Component`
const ng1Component: angular.IComponent = { const ng1Component: angular.IComponent = {
template: ($attrs: angular.IAttributes, $element: angular.IAugmentedJQuery) => { template: ($attrs: angular.IAttributes, $element: angular.IAugmentedJQuery) => {
expect($attrs).toBeUndefined(); expect($attrs).toBeUndefined();
expect($element).toBeUndefined(); expect($element).toBeDefined();
return 'Hello, Angular!'; 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` // Define `ng1Component`
const ng1Component: angular.IComponent = { const ng1Component: angular.IComponent = {
templateUrl: ($attrs: angular.IAttributes, $element: angular.IAugmentedJQuery) => { templateUrl: ($attrs: angular.IAttributes, $element: angular.IAugmentedJQuery) => {
expect($attrs).toBeUndefined(); expect($attrs).toBeUndefined();
expect($element).toBeUndefined(); expect($element).toBeDefined();
return 'ng1.component.html'; return 'ng1.component.html';
} }