AngularJSページ上の複数のグリッドでuiグリッドレンダリングの問題が発生する

Question

現在、4つのグリッドを実行しているページがあります。ページがロードされているメイングリッドはユーザーで、3つ以上のグリッドがそれぞれ独自のタブにあるモーダルに読み込まれます。私が持っている問題は、モーダルで4番目、3番目を追加したとき、残りの2つまたは最後のものがレンダリングされないということです。私はグリッドアウトラインを取得しますが、データは取得しません。これは私がモーダルをロードするたびにランダムに起こっています。

私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 です：過去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'} 

は、私はそれこと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。私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" 
         ]); 

をモーダルでこの問題にこれに変更gridOptions呼び出しを解決するためにAngularsショーの機能を備えた問題にあったので、グリッド

HAMLテンプレートは、私がui-grid-auto-resizeタグを追加しました

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