AngularJS从ng-change事件重新加载ngTable

Question

我使用以下工作正常填充ngTable:

      $scope.data = ClientService.query(
        {
            state: $scope.currentStateId,
            parentId: $scope.parentId
        });

    $scope.data.$promise.then(function (data) {
        $scope.tableParams = new ngTableParams(
            {
                page: 1,                        // show first page
                count: $scope.pageCount,        // count per page
                sorting: { Name: 'asc' },
                filter: { Name: ''}
            },
            {
                total: data.length,
                getData: function ($defer, params) {
                    var orderedData = params.filter() ? $filter('filter')(data, params.filter()) : data;
                    orderedData = params.sorting() ? $filter('orderBy')(orderedData, params.orderBy()) : orderedData;
                    params.total(orderedData.length); // set total for recalc pagination

                    $scope.accounts = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
                    $defer.resolve($scope.accounts);
                }
            });
    });

我现在希望从ng-change事件更新ngTable,该事件设置一个新的$ scope.currentStateId,如下所示:

 $scope.stateChange = function () {
        //$state.go('root.account.clients.list', { state: $scope.currentStateId, parentId : $scope.parentId }, { reload : true })
        //var sel = $scope.currentStateId;
        $scope.data = ClientService.query(
            {
                state: $scope.currentStateId,
                parentId: $scope.parentId
            });
       $scope.tableParams.reload();
    };

ClientService.query使用正确的参数命中服务器并返回正确的数据,但不更新ngTable.

有人可以请帮助.

Answer 1

更新(正确答案)

根据设计,承诺只能解决一次.因此,嵌套new ngTableParams在内部$scope.data.$promise.then(function (data) {限制了您稍后更新数据的能力.

相反,将回调放在getData函数内部,以便$scope.data在调用之前可以使用新的promise 重置$scope.tableParams.reload():

$scope.data = ClientService.query({
    ...
});

$scope.tableParams = new ngTableParams({                     
    ...
    getData: function ($defer, params) {
        $scope.data.$promise.then(function (data) {
            var orderedData = params.filter() ? $filter('filter')(data, params.filter()) : data;
            ...
            $defer.resolve($scope.accounts);
        });
    }
});

$scope.stateChange = function () {    
    $scope.data = ClientService.query({
        ...
    });

    $scope.tableParams.reload();
};

上一个答案(不正确)

在异步调用(ClientService查询)之后,您有一个同步函数调用(您的ngTable更新).因此,表更新在数据返回之前执行.

将响应中的表更新调用换行,一旦解析了promise,就会触发:

$scope.data = ClientService.query(
{
    state: $scope.currentStateId,
    parentId: $scope.parentId
});

$scope.data.$promise.then(function (data) {
    $scope.tableParams.reload();
};