[6.x] [angular-recursion] use angular-recursion module from npm (#17584) (#17587)

package.json

@@ -91,6 +91,7 @@
     "angular": "1.6.5",
     "angular-aria": "1.6.6",
     "angular-elastic": "2.5.0",
+    "angular-recursion": "^1.0.5",
     "angular-route": "1.4.7",
     "angular-sanitize": "1.5.7",
     "angular-sortable-view": "0.0.15",

src/ui/public/agg_table/agg_table.js

@@ -1,5 +1,6 @@
+import 'angular';
+import 'angular-recursion';
 import 'ui/paginated_table';
-import 'ui/compile_recursive_directive';
 import 'ui/agg_table/agg_table.less';
 import _ from 'lodash';
 import { uiModules } from 'ui/modules';
@@ -7,8 +8,8 @@ import aggTableTemplate from 'ui/agg_table/agg_table.html';
 import { RegistryFieldFormatsProvider } from 'ui/registry/field_formats';
 
 uiModules
-  .get('kibana')
-  .directive('kbnAggTable', function ($filter, config, Private, compileRecursiveDirective) {
+  .get('kibana', ['RecursionHelper'])
+  .directive('kbnAggTable', function ($filter, config, Private, RecursionHelper) {
     const fieldFormats = Private(RegistryFieldFormatsProvider);
     const numberFormatter = fieldFormats.getDefaultInstance('number').getConverterFor('text');
 
@@ -27,7 +28,7 @@ uiModules
       compile: function ($el) {
       // Use the compile function from the RecursionHelper,
       // And return the linking function(s) which it returns
-        return compileRecursiveDirective.compile($el);
+        return RecursionHelper.compile($el);
       },
       controller: function ($scope) {
         const self = this;

src/ui/public/agg_table/agg_table_group.js

@@ -1,11 +1,12 @@
-import 'ui/compile_recursive_directive';
+import 'angular';
+import 'angular-recursion';
 import 'ui/agg_table';
 import { uiModules } from 'ui/modules';
 import aggTableGroupTemplate from 'ui/agg_table/agg_table_group.html';
 
 uiModules
-  .get('kibana')
-  .directive('kbnAggTableGroup', function (compileRecursiveDirective) {
+  .get('kibana', ['RecursionHelper'])
+  .directive('kbnAggTableGroup', function (RecursionHelper) {
     return {
       restrict: 'E',
       template: aggTableGroupTemplate,
@@ -20,7 +21,7 @@ uiModules
       compile: function ($el) {
       // Use the compile function from the RecursionHelper,
       // And return the linking function(s) which it returns
-        return compileRecursiveDirective.compile($el, {
+        return RecursionHelper.compile($el, {
           post: function ($scope) {
             $scope.$watch('group', function (group) {
             // clear the previous "state"

src/ui/public/compile_recursive_directive.js

@@ -1,53 +0,0 @@
-import _ from 'lodash';
-import { uiModules } from 'ui/modules';
-
-/**
- * Angular can't render directives that render themselves recursively:
- * http://stackoverflow.com/a/18609594/296172
- */
-
-uiModules
-  .get('kibana')
-  .service('compileRecursiveDirective', function ($compile) {
-    return {
-    /**
-     * Manually compiles the element, fixing the recursion loop.
-     * @param element
-     * @param [link] A post-link function, or an object with function(s) registered via pre and post properties.
-     * @returns An object containing the linking functions.
-     */
-      compile: function (element, link) {
-      // Normalize the link parameter
-        if (_.isFunction(link)) {
-          link = {
-            post: link
-          };
-        }
-
-        // Break the recursion loop by removing the contents
-        const contents = element.contents().remove();
-        let compiledContents;
-        return {
-          pre: (link && link.pre) ? link.pre : null,
-          /**
-         * Compiles and re-adds the contents
-         */
-          post: function (scope, element) {
-          // Compile the contents
-            if (!compiledContents) {
-              compiledContents = $compile(contents);
-            }
-            // Re-add the compiled contents to the element
-            compiledContents(scope, function (clone) {
-              element.append(clone);
-            });
-
-            // Call the post-linking function, if any
-            if (link && link.post) {
-              link.post.apply(null, arguments);
-            }
-          }
-        };
-      }
-    };
-  });

yarn.lock

@@ -360,6 +360,10 @@ angular-mocks@1.4.7:
   version "1.4.7"
   resolved "https://registry.yarnpkg.com/angular-mocks/-/angular-mocks-1.4.7.tgz#d7343ee0a033f9216770bda573950f6814d95227"
 
+angular-recursion@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/angular-recursion/-/angular-recursion-1.0.5.tgz#cd405428a0bf55faf52eaa7988c1fe69cd930543"
+
 angular-route@1.4.7:
   version "1.4.7"
   resolved "https://registry.yarnpkg.com/angular-route/-/angular-route-1.4.7.tgz#9796ac2527547158cd42d757d69d90a891a6d95f"