AngularJS: $defer.resolve() не привязывает данные к таблице

Question

Ниже мой HTML-код для загрузки данных в таблицу.

<table id="users" class="dashboard-widget msbf-table" ng-table="usersTableParams" hide-pagination="false" show-filter="true">
                    <tr ng-repeat = "user in users" ng-click="usersClicked($event, user.userId);">
                        <td data-title="'User login'" sortable="'userLogin'" filter="{'userId' : 'text'}">{{user.userId}}</td>
                        <td data-title="'User role'" sortable="" filter="{'roleName' : 'text'}">{{user.roleName}}</td>
                    </tr>
                </table>

Это мой код для заполнения данных в таблице:

$scope.usersTableParams = new ngTableParams({
            page: startPage,
            count: rowsPerPage,
            sorting: {
                userId: 'asc'
            },
            filter: {
                userId: '',
                roleName:''
            }
        },
        {
            total: $scope.users.length,
            getData: function($defer, params){
                 // use build-in angular filter
                var orderedData = getFilteredSortedData($scope.users, params);
                //var orderedData = params.filter() ? $filter('filter')($scope.users, params.filter()) : $scope.users;
                //$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

                params.total(orderedData.length); // set total for recalc pagination


                $defer.resolve(getSlicedData(orderedData,params));
            }
        });

var getFilteredSortedData = function(data, params) {
            if (params.filter()) {
                data = $filter('filter')(data, params.filter());
            }
            if (params) {
                data = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
            }
            console.log('Filtered Data: '+JSON.stringify(data));
            console.log('Filtered Data size: '+data.length);
            return data;
        };
        //slices the data for the current page, checked
        var getSlicedData = function(data, params) {
             var slicedData = data.slice((params.page() - 1) * params.count(), params.page() * params.count());
             console.log('Sliced Data: '+JSON.stringify(slicedData));
             console.log('Sliced Data size: '+data.length);
             return slicedData;
        };

Проблема в том, что данные правильно поступают в переменную "slicedData", однако они не заполняются в таблице HTML. Я подозреваю, что строка:

$defer.resolve(getSlicedData(orderedData,params))' 

не работает. Любые указатели / идеи приветствуются.

Спасибо и С наилучшими пожеланиями Нишант Кумар

Answer 1

Я наконец понял, что происходит не так.

<table id="users" class="dashboard-widget msbf-table" ng-table="usersTableParams" hide-pagination="false" show-filter="true">
                <tr ng-repeat = "user in users" ng-click="usersClicked($event, user.userId);">
                    ....
                </tr>
            </table>

ng-repeat = "user in users"

следует заменить на

ng-repeat = "user in $data"

если вы используете

getData in ngTableParams 

настроить ваши данные, которые отображаются.

Исходя из моего понимания, это происходит потому, что функция getData() помещает данные со всеми другими деталями в $data, а не в переменную, которая на самом деле их хранит. Эта переменная $data отвечает за данные, которые будут отображаться на основе конфигураций, указанных для таблицы при объявлении параметров для таблицы. Надеюсь, вы все согласны с моим пониманием. Поскольку я новичок в Angular JS, возможно, я предоставил объяснения, основанные на неправильных предположениях, поэтому любые исправления приветствуются, и спасибо всем последователям и спонсорам StackFlow за помощь в этом.

Answer 2

Вам нужно вызвать $apply или вызвать дайджест после того, как будет вызвано разрешение.

Измените getData на:

getData: function($defer, $timeout, params){
     // use build-in angular filter
    var orderedData = getFilteredSortedData($scope.users, params);
    //var orderedData = params.filter() ? $filter('filter')($scope.users, params.filter()) : $scope.users;
    //$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

    params.total(orderedData.length); // set total for recalc pagination


    $defer.resolve(getSlicedData(orderedData,params));
    if (!$scope.$$phase) {
        $scope.$digest();
    }
}

Вы также можете попробовать обернуть $defer.resolve в $timeout, это вызовет дайджест - попробуйте это:

getData: function($defer, params){
     // use build-in angular filter
    var orderedData = getFilteredSortedData($scope.users, params);
    //var orderedData = params.filter() ? $filter('filter')($scope.users, params.filter()) : $scope.users;
    //$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

    params.total(orderedData.length); // set total for recalc pagination


    $timeout(function() {
        $defer.resolve(getSlicedData(orderedData,params));
    })
}

Причина, по которой вам нужно это сделать, заключается в том, что асинхронный код не воспринимается наблюдателями angularJS.