如何使用 $scope 在 UI-grid 中访问 gridApi？

Posted 2023-02-19

【中文标题】如何使用 $scope 在 UI-grid 中访问 gridApi？

【英文标题】：How to access gridApi in UI-grid with using $scope?

【发布时间】：2018-03-11 14:30:26

【问题描述】：

我正在开发的应用程序要求我访问 paginationChanged 函数，该函数仅在我将 onRegisterApi 对象添加到表中的 gridOptions 时才可用。我需要访问 paginationChanged 函数，以便可以在 PageSize 增加时更改网格的高度。我知道访问 gridApi 的唯一方法是注入 $scope ，自 Angular 1.6 及更高版本以来不再使用它。现在我正在使用 Angular 1.6 并通过使用 ui-grid= $ctrl.gridOptions 来访问 html 视图上的 gridOptions。有谁知道在 onRegisterApi 对象的一部分时无需使用 $scope 即可访问 gridApi 的方法？

【问题讨论】：

Angular 1.6 不使用 $scope 是怎么回事？

我不清楚你要什么。 onRegisterApi 回调专门用于让您访问 gridApi。您可以在此时附加您的网格事件处理程序，甚至可以保存对 gridApi 的控制器引用，以便在必要时在其他事件处理程序中使用。你能详细说明你正在尝试什么不起作用吗？

感谢@JCFord，我正在尝试在 onRegisterApi 回调中访问 gridAPI，但我不能，因为它需要在控制器中使用 $scope。我的控制器没有使用 $scope 编写，因为据我所知，在 Angular 1.6 及更高版本中不再使用 $scope。所以我想知道是否有一种方法可以访问 gridApi 而不必使用 $scope 因为我仍然需要访问其中关联的属性。

@JCFord ，我忘了补充一点，当我实现以下代码时，我正在尝试的不起作用的只是简单地尝试访问 gridApi： onRegisterApi: function(gridApi) console.日志（$ctrl.gridApi）。它在控制台中显示为未定义。以下代码可以正常工作，因为在控制器中使用 $scope ：onRegisterApi: function(gridApi)console.log($scope.gridApi)。

下面的答案应该适用于您的 gridApi 访问。不过请注意，$scope 仍然是 AngularJS 的一个组成部分，包括 1.6 版本。

【参考方案1】：

在不使用 $scope 的情况下在 gridOptions 对象所在的控制器或服务中访问 gridApi 的方法是确保添加以下属性： appScopeProvider: 允许您设置此对象的名称，即我的情况是 $ctrl。和 onRegisterApi: 这是允许您访问 gridApi 所必需的。参考http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions

当您使用 appScopeProvider 重置此对象的名称时，您也在设置 gridApi 的名称。因此，无需使用 $ctrl.gridapi ，您只需要单独使用 $ctrl 即可。所以在我的情况下，解决方案如下：

 var OverViewTable = function ($ctrl) 
     var gridOptions = 
         enableSorting: true,
         enablePagination: true,
         enablePaginationControls: true,
         paginationPageSizes: [50, 100, 200],
         paginationPageSize: 50,
         rowHeight: 60,
         appScopeProvider:$ctrl,
         onRegisterApi: function ($ctrl)
         $ctrl.pagination.on.paginationChanged(null, function(newPage, 
          pageSize)

我还必须在函数 paginationChanged() 中将您通常看到的 $scope 设置为 null 作为参数，因为我不想使用 $scope。

【参考方案2】：

gridApi 对象不会自动添加到您的 $ctrl 中。如果你想要它，你必须自己附上它。

下面是通过onRegisterApi回调访问gridApi的方法：

$ctrl.gridOptions = 
    onRegisterApi = function(gridApi)

        //Save a reference to the gridApi for later
        $ctrl.gridApi = gridApi;

        //Attach your event handlers
        gridApi.cellNav.on.navigate($scope,function(newRowCol, oldRowCol)
            $log.log('navigation event');
        );

    

http://ui-grid.info/docs/#/api/ui.grid.class:GridApi

【讨论】：

我尝试了你所说的，但 $ctrl.gridApi 在控制台中显示为未定义。似乎 onRegisterApi 将定义带有 $scope 的 gridApi。

$ctrl.gridApi 将是未定义的，直到您在 onRegisterApi 回调中定义它。

感谢@JCFord，我找到了解决方案，并将在下面发布代码。