fixup! fix(upgrade): properly destroy upgraded component elements and…

… descendants
angular · Oct 5, 2018 · 2493652 · 2493652
1 parent fbf7f7f
commit 2493652
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/packages/upgrade/src/common/upgrade_helper.ts b/packages/upgrade/src/common/upgrade_helper.ts
@@ -124,6 +124,11 @@ export class UpgradeHelper {
       controllerInstance.$onDestroy();
     }
     $scope.$destroy();
+
+    // Clean the jQuery/jqLite data on the component+child elements.
+    // Equivelent to jQuery/jqLite invoking `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
     angular.element.cleanData([this.element]);
     angular.element.cleanData(this.element.querySelectorAll('*'));
   }

diff --git a/packages/upgrade/test/dynamic/upgrade_spec.ts b/packages/upgrade/test/dynamic/upgrade_spec.ts
@@ -2196,9 +2196,11 @@ withEachNg1Version(() => {
              // Mocking animations (via `ngAnimateMock`) avoids the issue.
              angular.module('ng1', ['ngAnimateMock'])
                  .component('ng1', {
-                   controller: function($element: angular.IAugmentedJQuery) {
-                     $element.on !('$destroy', elementDestroyListener);
-                     $element.contents !().on !('$destroy', descendantDestroyListener);
+                   controller: class {
+                     constructor(private $element: angular.IAugmentedJQuery) {} $onInit() {
+                       this.$element.on !('$destroy', elementDestroyListener);
+                       this.$element.contents !().on !('$destroy', descendantDestroyListener);
+                     }
                    },
                    template: '<div></div>'
                  })
@@ -2237,11 +2239,11 @@ withEachNg1Version(() => {
              // Define `ng1Component`
              const ng1Component: angular.IComponent = {
                controller: class {
-                 constructor($element: angular.IAugmentedJQuery) {
-                   $element.data !('test', 1);
-                   $element.contents !().data !('test', 2);
+                 constructor(private $element: angular.IAugmentedJQuery) {} $onInit() {
+                   this.$element.data !('test', 1);
+                   this.$element.contents !().data !('test', 2);
 
-                   ng1ComponentElement = $element;
+                   ng1ComponentElement = this.$element;
                  }
                },
                template: '<div></div>'
@@ -2303,10 +2305,10 @@ withEachNg1Version(() => {
              // Define `ng1Component`
              const ng1Component: angular.IComponent = {
                controller: class {
-                 constructor($element: angular.IAugmentedJQuery) {
-                   ng1DescendantElement = $element.contents !();
+                 constructor(private $element: angular.IAugmentedJQuery) {} $onInit() {
+                   ng1DescendantElement = this.$element.contents !();
 
-                   $element.on !('click', elementClickListener);
+                   this.$element.on !('click', elementClickListener);
                    ng1DescendantElement.on !('click', descendantClickListener);
                  }
                },