AngularJS 페이지의 다중 격자에 ui 격자 렌더링 문제가 발생했습니다.

Question

현재 4 개의 격자가있는 페이지가 있습니다. 페이지로로드되는 메인 그리드는 사용자이며, 3 개의 그리드가 각각 자체 탭에 모달로로드됩니다. 내가 가지고있는 문제는 내가 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에서 3 번째 변수를 제외하고 동일한 코드; 그들은 모달 코드이 10, 18, 26 있습니다 : 마지막 3 호출이 사용자의 그룹, 보안 설정 및 주소를 당기고 그리드에 기록

` #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()` 

; $scope.gridOptionsAdd.data = data.

그리드로 HTML에 정의 된 각 그리드는 자신의 ID를 가지고 있으며, 다른 gridOption을 의미

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

내가 3 오류가 있음을 compling을 제외하고 내 콘솔에서 아무 것도 얻을 설정 속성 '코어'를 읽을 수 있습니다

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 통화를 해결하기 때문에 :

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