AngularJS ui-页面上多个网格的网格呈现问题

Question

我有一个页面目前是运行 4 个网格。与页面一起加载的主网格是用户，然后 3 个网格加载到模式中，每个网格都在它自己的选项卡中。我一直遇到的问题是，当我在模态中添加第 4 个、第 3 个时，其他两个或最后一个将不会呈现。我得到了网格轮廓但没有数据。每次我加载模态时，这都是随机发生的。

我的网格选项看起来像这样：

` $scope.gridOptionsAdd = {
    enableColumnResizing: true,
    enableSorting: true,
    data: $scope.newAdd,
    columnDefs: [
      {name: 'Address Type', field: 'addressTypeDescription'},
      {name: 'Data', field: 'addressData'},
      {name: 'Primary', field: 'primaryYn'},
      {name: 'Private', field: 'privateYn'},
      {name: 'Remove', cellTemplate: ' ' +
        '<button type="button" class="usrView btn btn-danger btn-sm" ng-click="grid.appScope.groupRemove(row.entity.id)">' +
        '<div class="fa fa-trash" data-toggle="tooltip" data-pacement="bottom" title="View User"></div>' +
        '</button>'
      }
    ],
    onRegisterApi: (gridApi) ->
      $scope.gridApiAdd = gridApi
      $interval( () ->
        $scope.gridApi.core.handleWindowResize()
      , 500, 10)
  }`

除了$interval中的第3个变量外，3个格子都是相同的代码；他们分别是 10 岁、18 岁和 26 岁。模态代码是这样的：

` #open edit user modal
  $scope.userEdit = (id) ->
    $scope.userId = id
    $modalInstance = $uibModal.open ({
      animation: $scope.animationsEnabled,
      templateUrl: 'userEditModal.html',
      controller: 'editUserInCtrl',
      keyboard: true,
      size: 'lg',
      scope: $scope,
      resolve: {
        data: () ->
          return  EntryUsr.get({id: id }).$promise
        ,
        address: () ->
          return EntryAdd.query({user_id: id}).$promise
        ,
        addType: () ->
          return EntryAddType.query().$promise
        ,
        usrPosition: () ->
          return EntryPos.query().$promise
      }
    })
    $scope.updateGrpTable()
    $scope.updateRoleTable()
    $scope.updateAddTable()`

最后 3 次调用拉取用户的组、安全设置和地址并将它们写入网格； $scope.gridOptionsAdd.data = data .

网格在 HTML 中定义为：

 %div.grid#grid3{'ui-grid'=>'gridOptionsRole'}

每个网格都有自己的 ID 并引用不同的 gridOption 集

我的控制台除了 3 个错误之外什么也没有得到，它可以读取属性 'core'

angular.self-a3680ff….js?body=1:13643 TypeError: Cannot read property 'core' of undefined
    at user.self-2a6c9f3….js?body=1:200
    at callback (angular.self-a3680ff….js?body=1:12457)
    at Scope.$eval (angular.self-a3680ff….js?body=1:17379)
    at Scope.$digest (angular.self-a3680ff….js?body=1:17192)
    at Scope.$apply (angular.self-a3680ff….js?body=1:17487)
    at tick (angular.self-a3680ff….js?body=1:12447)

非常感谢。

Answer 1

我遇到的问题与这张票有关，5151。因为模态中的网格存在问题，Angulars show 函数解决了这个问题，所以 gridOptions 调用更改为：

$scope.gridOptionsAdd = {
    enableColumnResizing: true,
    enableSorting: true,
    data: $scope.newAdd,
    columnDefs: [
      {name: 'Address Type', field: 'addressTypeDescription'},
      {name: 'Data', field: 'addressData'},
      {name: 'Primary', field: 'primaryYn'},
      {name: 'Private', field: 'privateYn'},
      {name: 'Remove', cellTemplate: ' ' +
        '<button type="button" class="usrView btn btn-danger btn-sm" ng-click="grid.appScope.groupRemove(row.entity.id)">' +
        '<div class="fa fa-trash" data-toggle="tooltip" data-pacement="bottom" title="View User"></div>' +
        '</button>'
      }
    ]
  }

在我的 application.js 文件中，添加了 ui.grid.autoResize：

angular.module('myApp', [
                            "ngResource",
                            "ui.bootstrap",
                            "ui.grid",
                            "ngFileUpload",
                            "ui.grid.autoResize"
                        ]);

HAML 模板我添加了 ui-grid-auto-resize 标签

%div.grid#grid4{'ui-grid'=>'gridOptionsAdd', 'ui-grid-auto-resize'=>''}

AngularJS ui-页面上多个网格的网格呈现问题

AngularJS ui-grid rendering issues with multiple grids on a page

angularjs

ruby

ui-grid