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

Question

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

Answer 1

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

Answer 2

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

当您使用 appScopeProvider 重置 this 对象的名称时，您也在设置 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){}

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

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

How to access gridApi in UI-grid with using $scope?

angularjs

angular-ui-grid

ui-grid

angular1.6