ui.grid pagination внешний не работает AngularJS

Question

Я хочу помочь мне с угловым ui.grid. Что со мной происходит, я не могу сделать внешний пейджинг, потому что когда я делаю paginationChange, ничего не происходит.

Это мой код app.js:

angular.module('ventasFeApp', [ 
'ngAnimate', 
'ngCookies', 
'ngResource', 
'ngRoute', 
'ngSanitize', 
'ngTouch', 
'ngMessages', 
'angular-loading-bar', 
'toastr', 
'ui.grid', 
'ui.grid.pagination', 
]); 

контроллер:

  angular.module('ventasFeApp').controller('UsuarioCtrl', function ($scope, $http, httpPeticion) { 
     $scope.gridOptions = {}; 
     $scope.getList = function(){ 
      var controller = 'usuario'; 
      var action = 'getlist'; 
      httpPeticion.post(controller, action, '').then(
       function(respData){    
        $scope.gridOptions.paginationPageSizes = [1, 2, 3]; 
        $scope.gridOptions.paginationPageSize= 1; 
        $scope.gridOptions.useExternalPagination = true,  
        $scope.gridOptions.onRegisterApi = function(gridApi){ 
         $scope.gridApi = gridApi; 
         $scope.gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) { 
          console.log("HI!!!!"); 
          console.log(newPage, pageSize); 
          var data = {'pagina' : newPage, 'maxresult' : pageSize, 'consulta': ''}; 
          httpPeticion.post(controller, action, $.param(data)).then(
           function(respData){ 
            $scope.gridOptions.data = respData.data; 
            $scope.gridOptions.totalItems = 100; 
            var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize; 
            $scope.gridOptions.data = respData.data.slice(firstRow, firstRow + paginationOptions.pageSize); 

           }, function(error){ 
            console.log(error); 
           });      
         }); 

        }; 
        console.log($scope.gridOptions) 
        $scope.gridOptions= { 
         data: respData.data, 
         columnDefs: [ 
         {field: 'nombre', displayName: 'Nombre'}, 
         {field: 'documento', displayName: 'Documento'}, 
         {field: 'correo', displayName: 'Correo'}, 
         {field: 'telefono', displayName: 'Telefono'}, 
         {field: 'tipocuenta', displayName: 'Tipo Cuenta'}, 
         { 
          field: 'action', 
          width: 100, 
          displayName: 'Acción', 
          cellTemplate: '<button id="editBtn" type="button" class="btn btn-xs btn-default glyphicon glyphicon-pencil" ng-click="grid.appScope.editUsuario(row.entity.id)" ></button>' 
         }] 

        };  
       },function(error){ 
        console.log(error); 
       }); 
    } 
}); 

Все варианты UI.grid работают для меня, минус $ scope.gridOptions.onRegisterApi. если кто-нибудь знает, почему это не работает, я буду очень благодарен.

Answer 1

// this creates an empty object. Basically, you now have *no* set options 
$scope.gridOptions = {}; 

$scope.getList = function(){ 
// none of the code in this function is called until 
// someone invokes "getList" either from the DOM or 
// someplace else in the controller 

// this makes an async http request and the "then" function won't 
// run until the server responds with a 200 response code 
httpPeticion.post(controller, action, '').then(function(){ 
    // by the time this code runs, your grid is already rendered 
    // (incorrectly) on the page 
}