Отложенная загрузка таблицы ngTable с использованием ocLazyLoad

Question

В одном из наших проектов мы пытаемся написать обертку вокруг библиотеки ngTable! в контроллере этого компонента мы загружаем ngTable, используя ocLazyLoad. Вот что мы написали:

Компонент DataGrid

(function() {

  'use strict';

  angular
    .module('CommonApplication')
    .component('datagrid', {
      scope: true,
      bindings: {
        basepath: '@',
        title: '@',
        dataset: '<'
      },
      templateUrl: '/frontend/components/global/datagrid/templates/datagrid.html',
      controller: 'DataGridController',
    });

})();

Контроллер Datagrid с $ocLazyLoad (Не работает:~|)

(function() {

  'use strict';

  angular
    .module('CommonApplication')
    .controller('DataGridController', 
    [ '$scope', '$injector', '$ocLazyLoad', DataGridController ]);

  function DataGridController($scope, $injector, $ocLazyLoad) {

    var vm = this;
    var components = {
      datagrid: [
        'https://unpkg.com/ng-table@2.2.0/bundles/ng-table.min.css',
        'https://unpkg.com/ng-table@2.2.0/bundles/ng-table.min.js'
      ]
    };

    $ocLazyLoad.load(components.datagrid).then(function() {
      var NgTableParams = $injector.get('NgTableParams');
      vm.data = [{name: "Moroni", age: 50},{name: "Moroni", age: 50},{name: "Moroni", age: 50},{name: "Moroni", age: 50}];
      vm.tableParams = new NgTableParams({
        page: 1,
        count: 10
      }, {
        dataset: vm.data
      });
    });
  }

})();

Контроллер данных без $ocLazyLoad (Работает)

(function() {

  'use strict';

  angular
    .module('CommonApplication')
    .controller('DataGridController', 
    [ '$scope', '$injector', '$ocLazyLoad', DataGridController ]);

  function DataGridController($scope, $injector, $ocLazyLoad) {

    var vm = this;
    var components = {
      datagrid: [
        'https://unpkg.com/ng-table@2.2.0/bundles/ng-table.min.css',
        'https://unpkg.com/ng-table@2.2.0/bundles/ng-table.min.js'
      ]
    };

    var NgTableParams = $injector.get('NgTableParams');
    vm.data = [{name: "Moroni", age: 50},{name: "Moroni", age: 50},{name: "Moroni", age: 50},{name: "Moroni", age: 50}];
    vm.tableParams = new NgTableParams({
      page: 1,
      count: 10
    }, {
      dataset: vm.data
    });
  }

})();

Используя ocLazyLoad, если я установлю точку останова на строке, которую мы определяем vm.tableParams когда он населяется new NgTableParams настройки и другие свойства этого имеют эту конкретную ошибку в их arguments свойства.

---

Вот ошибка исключения, которая указывает на конец $ocLazyLoad.then функция обратного вызова! Это datagrid.js:47:7 потому что мы конкатем этот файл JS и еще один в datagrid.js:

TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context.
    at Function.remoteFunction (<anonymous>:3:14)
    at http://localhost:8081/frontend/components/global/datagrid/datagrid.js:47:7
    at http://localhost:8081/frontend/javascripts/head.min.js:136:20
    at m.$eval (http://localhost:8081/frontend/javascripts/head.min.js:150:347)
    at m.$digest (http://localhost:8081/frontend/javascripts/head.min.js:147:420)
    at http://localhost:8081/frontend/javascripts/head.min.js:150:434
    at e (http://localhost:8081/frontend/javascripts/head.min.js:50:444)
    at http://localhost:8081/frontend/javascripts/head.min.js:53:300

---

Есть мысли по этому поводу?!

Answer 1

Видимо, ленивая загрузка даже используя свое обещание .then(callback) не заставляет Angular ждать его завершения!

Что я делал, это чтобы инициализировать таблицу с помощью ngTableParams при загрузке ng-table отделки! Имея это в виду, я решил использовать простой трюк!

Я прикрепил ngTableParams к переменной Scope с именем vm.tableParams который позже я буду использовать для инициализации таблицы в представлении с ней прямо при использовании ng-tableДиректива Таким образом, даже перед вызовом директивы, которая еще не была загружена, мы проверяем, завершена ли отложенная загрузка или нет ng-if а также tableParams:

Вид: datagrid.pug

// Load Directive if Params in the controller were attached to the scope!
.row.expanded(ng-if="table.tableParams")
    .small-12.columns 
      table.data-table.hover.stacktable.table-condensed.table-bordered.table-striped(ng-table-dynamic="table.tableParams with table.headers",template-pagination="custom/pager", show-filter="true")
        tr(ng-repeat="(rowIndex, row) in $data ")
          td(ng-repeat="column in $columns", ng-switch="column.field")
            input.selectSwitch( ng-switch-when="selector", type="checkbox", ng-model="table.checkboxes.items[row.id]") 
            div(ng-switch-when="id") {{ rowIndex + 1 }}
            div(ng-switch-when="body") {{ row }}
            span(ng-switch-default) {{row[column.field]}}

Контроллер: datagrid.controller.js

// Lazyload datagrid components and Initialize headers and parametres!
    $ocLazyLoad.load(components.datagrid).then(function (){
      self.headers = self.dataset.headers;
      self.dataset.headers.forEach(function( header ) {
        header.title = header.headerTitle;
      });
      var NgTableParams = $injector.get('NgTableParams');
      self.tableParams = new NgTableParams({
        count: 5
      }, {
        dataset: self.dataset.data
      });
    });

---

Таким образом, мы не будем использовать $compile вручную, чтобы повторно визуализировать представление, и мы позволяем angular обрабатывать саму компиляцию, не влияя на производительность:)