AngularJS在一個頁面上有多個網格的UI網格渲染問題

Question

我有一個網頁當前正在運行4個網格。加載頁面的主要網格是用戶，然後在其自己的選項卡中將3個網格加載到Modal中。我遇到的問題是，當我在模式中添加了第4個，第3個時，其他兩個或最後一個不會渲染。我得到網格大綱，但沒有數據。每次我加載模態時都會隨機發生。

我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>' 
     } 
    ], 
    onRegisterApi: (gridApi) -> 
     $scope.gridApiAdd = gridApi 
     $interval(() -> 
     $scope.gridApi.core.handleWindowResize() 
     , 500, 10) 
    }` 

每個柵格3的相同，除了在$interval的第三變量相同的代碼;他們是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設置

我什麼也沒得到我的控制檯除了compling這3個錯誤可以讀取屬性'核心'

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顯示功能的網格來解決這個問題，即改變這個gridOptions來電：在我的application.js文件

$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>' 
     } 
    ] 
    } 

，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'=>''}