ui-grid.js 运行两次后 $scope.uiGrid 未定义

问题描述

我有一个包含子指令的父指令。 child 指令实现了一个 uiGrid。为了响应 UI 事件，我想重新编译父指令。但是，当我这样做时，uiGrid 无法加载，并且它的内部 $scope.uiGrid 未定义。在这种情况下，ui-grid.js 实际上运行了两次 - 第一次运行 $scope.uiGrid 被设置为正确的值，但第二次 $scope.uiGrid 未定义。还要注意网格在初始视图加载时确实呈现；只有在尝试 $compile 父级之后，ui grid 才会失败。

'use strict';

export default function gridDirective(gridHelperService,$translate) {
  'ngInject';

  return {
    scope: {
      gridData: '=',gridColDefs: '=',customGridOptions: '=',filterCriteria: '=',sortCriteria: '=',onRowSelect: '&',onLinkClick: '&'
    },restrict: 'EA',templateUrl: 'scripts/components/common/grid-directive/grid.directive.html',link
  };

  function link(scope,element,attrs) {
    scope.defaultGridOptions = {
      data: 'gridData',enableGridMenu: true,enableFiltering: true,enableSorting: true,gridMenuTitleFilter: $translate,rowTemplate: `
        <div ng-dblclick="grid.appScope.rowDblClick(row)"
          ng-repeat="(colRenderIndex,col) in colContainer.renderedColumns track by col.colDef.name"
          class="ui-grid-cell"
          ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }"
          ui-grid-cell>
        </div>
      `,onRegisterapi: function (gridApi) {
        scope.gridApi = gridApi;
        gridHelperService.setRowHeaderHeight(gridApi);

        gridApi.selection.on.rowSelectionChanged(scope,rowSelectedEvent);
        gridApi.selection.on.rowSelectionChangedBatch(scope,rowSelectedEventBatch);

        gridApi.core.handleWindowResize();
        gridHelperService.refreshGrid(scope.gridApi);
      }
    };

    if (scope.customGridOptions) {
      _.merge(scope.defaultGridOptions,scope.customGridOptions);
    }

    scope.gridOptions = gridHelperService.defaultGridOptions(scope.defaultGridOptions);

    scope.gridOptions.columnDefs = scope.gridColDefs.map(colDef => {
      colDef.displayName = $translate.instant(colDef.displayName);
      return colDef;
    });

    gridHelperService.setFilteredGridDefaultWatchers(scope);

    function rowSelectedEvent() {
      const rows = scope.gridApi.selection.getSelectedRows();
      scope.onRowSelect({rows});
    }

    function rowSelectedEventBatch() {
      rowSelectedEvent();
    }
  }
}

<div>
  <div class="grid dct-grid-list-and-details-layout"
    ui-grid="gridOptions"
    ui-grid-pinning
    ui-grid-selection
    ui-grid-move-columns
    ui-grid-resize-columns
    ui-grid-empty-base-layer>
  </div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）