[英]AngularJS ui-grid rendering issues with multiple grids on a page
我有一个页面当前正在运行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)
}`
除$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)
非常感谢。
我遇到的问题与此票证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"
]);
我添加了ui-grid-auto-resize
标签的HAML模板
%div.grid#grid4{'ui-grid'=>'gridOptionsAdd', 'ui-grid-auto-resize'=>''}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.