cargdev/angular
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(upgrade): properly destroy upgraded component elements and descendants (#26209)

Browse Source 
Fixes #26208

PR Close #26209
This commit is contained in:
Jason Bedard
2018-10-01 21:29:38 -07:00
committed by Jason Aden
parent e26cb21e4e
commit 912f3d186f
4 changed files with 310 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/upgrade/src/common/angular1.ts
View File

@ -214,24 +214,29 @@ export interface INgModelController {
$name: string;
}
function noNg() {
function noNg(): never {
throw new Error('AngularJS v1.x is not loaded!');
}
const noNgElement: typeof angular.element = () => noNg();
noNgElement.cleanData = noNg;
let angular: {
bootstrap: (e: Element, modules: (string | IInjectable)[], config?: IAngularBootstrapConfig) =>
IInjectorService,
module: (prefix: string, dependencies?: string[]) => IModule,
element: (e: string | Element | Document | IAugmentedJQuery) => IAugmentedJQuery,
element: {
(e: string | Element | Document | IAugmentedJQuery): IAugmentedJQuery;
cleanData: (nodes: Node[] | NodeList) => void;
},
version: {major: number},
resumeBootstrap: () => void,
getTestability: (e: Element) => ITestabilityService
} = <any>{
} = {
bootstrap: noNg,
module: noNg,
element: noNg,
version: undefined,
element: noNgElement,
version: undefined as any,
resumeBootstrap: noNg,
getTestability: noNg
};
@ -282,6 +287,7 @@ export const module: typeof angular.module = (prefix, dependencies?) =>
angular.module(prefix, dependencies);
export const element: typeof angular.element = e => angular.element(e);
element.cleanData = nodes => angular.element.cleanData(nodes);
export const resumeBootstrap: typeof angular.resumeBootstrap = () => angular.resumeBootstrap();

10
packages/upgrade/src/common/upgrade_helper.ts
View File

@ -124,7 +124,15 @@ export class UpgradeHelper {
controllerInstance.$onDestroy();
}
$scope.$destroy();
this.$element.triggerHandler !('$destroy');
// Clean the jQuery/jqLite data on the component+child elements.
// Equivelent to how jQuery/jqLite invoke `cleanData` on an Element (this.element)
// https://github.com/jquery/jquery/blob/e743cbd28553267f955f71ea7248377915613fd9/src/manipulation.js#L223
// https://github.com/angular/angular.js/blob/26ddc5f830f902a3d22f4b2aab70d86d4d688c82/src/jqLite.js#L306-L312
// `cleanData` will invoke the AngularJS `$destroy` DOM event
// https://github.com/angular/angular.js/blob/26ddc5f830f902a3d22f4b2aab70d86d4d688c82/src/Angular.js#L1911-L1924
angular.element.cleanData([this.element]);
angular.element.cleanData(this.element.querySelectorAll('*'));
}
prepareTransclusion(): angular.ILinkFn|undefined {