Question

我们遇到一个问题，我们有网格标签和每个网格不同的gridOptions。从网格到网格的标签时，数据会正确更新，但页脚不会正确更新总项目。我们将ui-grid指令包装在我们自己的自定义指令中，以便我们可以为每个选项卡传递不同的选项，尽管我已经删除了一些代码以便在此处进行报告。

第一个标签总是适用于所有内容。但其他选项卡都没有。一旦进入选项卡，单击另一个选项卡，然后再返回，页脚似乎在第二次更新就好了...我认为它可能与onRegisterApi无法正确设置2 - x标签，因为我确实注意到那里有一些奇怪，这就是为什么即使我扩展了默认选项后，我还有行scope.gridOptions.onRegisterApi = setGridApi;只是为了确保运行。如果我不添加此行，则其他选项卡不会调用此方法。

我甚至尝试过不使用ngIf和ngRepeat，只使用gridOptions上的监视来更新具有不同数据的单个网格，但仍然存在同样的问题。 ngShow工作得很好，除了它在第一页加载时一次加载所有网格，我不能有。

我做错了什么或这是我发现的问题？（我知道分页仍在“Alpha”中）

我已经搜索了堆栈溢出以及ui-grid的github问题，并且发现了一些关于页脚的类似问题，但没有任何真正相关的问题。我发现的大多数问题都是在调整浏览器大小之前没有正确绘制网格，这不是问题。我也在他们的github上发布了同样的问题：https://github.com/angular-ui/ui-grid/issues/4364

我正在使用Angular 1.4.4和angular-ui-grid 3.0.4（尝试3.0.6，但同样的问题）

这是一个plnkr：http://plnkr.co/edit/4XWarYb9xlDnadpTC0kG?p=preview

subTab.html：

<div class="panel panel-default padding-xlg">
  <ul id="subtabs" class="list nav-detail nav-detail-tabs">
    <li data-ng-repeat="tab in tabs" data-ng-class="getTabClasses(tab)">
      <a href="" data-ng-click="select(tab)">{{tab.heading}}</a>
    </li>
  </ul>
  <div data-cs-grid data-ng-repeat="tab in tabs" data-grid-options="tab.gridOptions" data-ng-if="isActiveTab(tab)"></div>
</div>

subTab指令（略微编辑隐私权）：

...
function csSubTab($resource, $stateParams, $state) {
    var directive = {
      restrict: 'A',
      scope: {},
      templateUrl: 'subTab.html',
      link: link
    };

    function link(scope) {
      scope.activeTab;

      scope.tabs = getModuleSubTabs($stateParams.module);

      select(scope.tabs[0]);

      scope.select = select;
      scope.isActiveTab = isActiveTab;
      scope.getTabClasses = getTabClasses;

      function select(tab) {
        scope.activeTab = tab.heading;
      }

      function isActiveTab(tab) {
        return tab.heading === scope.activeTab;
      }

      function getTabClasses(tab) {
        var classes = '';
        if (isActiveTab(tab)) {
          classes += 'active';
        }
        return classes;
      }

      function getModuleSubTabs(moduleName) {
        var tabs = [];
        var tabList = ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4', 'Tab 5'];
        for (var i = 0, len = tabList.length; i < len; i++) {
          tabs.push({
            heading: tabList[i],
            gridOptions: getSubTabGridOptions(tabList[i].toLowerCase().replace(/ /g, ''))
          });
        }
        return tabs;
      }

      function getSubTabGridOptions(subTabName) {
        return {
          useExternalPagination: true,
          paginationPageSizes: [10],
          paginationPageSize: 10,
          enableFiltering: false,
          enableGridMenu: true,
          exporterMenuPdf: false,
          enableRowSelection: true,
          selectWithCheckboxOnly: true,
          showSelectionCheckbox: true,
          rowHeight: 22,
          columnsResource: $resource('app/modules/data/subTabs/' + subTabName + 'Columns.json'),
          dataResource: $resource('api/3/' + subTabName)
        };
      }
    }

    return directive;
  }

grid.html：

<div data-ui-grid="gridOptions" class="grid" data-ui-grid-edit data-ui-grid-cellnav data-ui-grid-pagination ui-grid-resize-columns ui-grid-auto-resize ui-grid-selection ui-grid-exporter ui-grid-grouping></div>

网格指令（略微编辑隐私）：

...
function csGrid($resource) {
    var directive = {
      restrict: 'A',
      scope: {
        gridOptions: '='
      },
      templateUrl: 'grid.html',
      link: link
    };

    function link(scope) {
      var defaultGridOptions = {
        useExternalPagination: true,
        paginationPageSizes: [10],
        paginationPageSize: 10,
        onRegisterApi: setGridApi,
        enableFiltering: false,
        enableGridMenu: true,
        exporterMenuPdf: false,
        enableRowSelection: true,
        selectWithCheckboxOnly: true,
        showSelectionCheckbox: true,
        rowHeight: 22
      };

      scope.gridOptions = angular.extend({}, defaultGridOptions, scope.gridOptions);
      scope.gridOptions.onRegisterApi = setGridApi;

      scope.gridOptions.columnsResource.get({}, setColumns);
      getPage(1);

      function setColumns(data) {
        scope.gridOptions.columnDefs = data.columns;
      }

      function setData(data) {
        if (data['@type'] && data['@type'] !== 'Error') {
          scope.gridOptions.totalItems = data['hydra:totalItems'];
          scope.gridOptions.data = data['hydra:member'];
          if (data['hydra:member'].length === 0) {
            alert('No Results');
          }
        } else {
          alert(data['hydra:title'] + ':\n\t' + data['hydra:description']);
        }
      }

      function dataError(e) {
        alert('error retrieving data:\n\t' + e);
      }

      function setGridApi(gridApi) {
        scope.gridApi = gridApi;
        scope.gridApi.pagination.on.paginationChanged(scope, getPage);
      }

      function getPage(pageNum){
        scope.gridOptions.dataResource.get({page: pageNum}, setData, dataError);
      }
    }

    return directive;
  }

使用ngIf和ngRepeat的多个网格不会从服务器端分页更新分页控件和页脚

0 个答案: