如何使用$ scope访问UI网格中的gridApi?

时间:2017-09-29 16:13:52

标签: angularjs angular-ui-grid ui-grid angular1.6

我正在处理的应用程序要求我访问paginationChanged函数,该函数仅在我将onRegisterApi对象添加到表格中的gridOptions时才可用。我需要访问paginationChanged函数,以便随着PageSize的增加我可以更改网格的高度。我知道访问gridApi的唯一方法是注入自Angular 1.6及更高版本以来不再使用的$ scope。现在我使用Angular 1.6并访问html视图中的gridOptions是通过使用ui-grid = $ ctrl.gridOptions。有没有人知道如何在onRegisterApi对象的一部分访问gridApi而不必使用$ scope?

2 个答案:

答案 0 :(得分:1)

在gridOptions对象所在的控制器或服务中不使用$ scope访问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){}

由于我不想使用$ scope,我还必须在函数paginationChanged()中设置通常将$ scope作为参数设置为null的位置。

答案 1 :(得分:0)

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