Question

我已经构建了一个包含过滤器，排序，限制和分页系统的表。使用javascript中的常规对象数组按预期工作。

当我尝试从服务器检索数据并将其与客户端分页和过滤器一起使用时，我的问题出现了。当页面加载几秒钟时，$ scope.data未定义，直到$ http被解析。我不知道如何解决它，我希望你能帮助我。

这是我认为在$ http解析之前初始化的分页过滤器。

.filter('pagination', function () {
    return function (inputArray, currentPage, pageSize) {
        var start = (currentPage - 1) * pageSize;
        return inputArray.slice(start, start + pageSize);
    };
})

我会在这里留下一个小问题，这样你就能更好地看到它。

Fiddle

Answer 1

我不知道是否应该编辑我的帖子，或者我正确地发布了答案，但我想出了一个解决方案，我想分享它。

我的问题是，在初始化控制器时，$ scope.data（来自服务器的请求）未定义，因此我所做的是设置路由并等待承诺解析，然后再初始化控制器。

我提出的一个问题是，无法将.factory直接注入.config，因此我不得不向我的.config注入$ provide并提供我的服务。

这是我正在谈论的代码的一部分：

.config(['$routeProvider','$provide', function($routeProvider, $provide) {
    $provide.factory('select', ['$http','$q', function($http, $q) {
        return {
            getItems : function () {

                var deferred = $q.defer();

                $http.get('php/select_diarios.php', {cache : true}).success(function (data) {
                    //Passing data to deferred's resolve function on successful completion
                    deferred.resolve(data);
                }).error(function () {
                        //Sending an error message in case of failure
                        deferred.reject("An error occured while fetching items");
                    });
                //Returning the promise object
                return deferred.promise;
            }
        }
    }]);

    $routeProvider
        .when('/', {
            templateUrl: 'modulos/home/home.html',
            controller: 'AppController',
            resolve: {
                **data**: function (select) {
                    return select.getItems();
                }
            }
        }).
        when('/genericos', {
            controller: 'genericosController'
        })
        .otherwise({ redirectTo: '/' });
}])

最后我只需要将解析的数据参数注入我的控制器，如下所示：

.controller('AppController', ['$scope', '$location','filterFilter','**data**', function ($scope, $location, searchFilter, **data**)
... more code
}]);

另外，由于否则重定向，您必须在分页原因中设置<a href="#/></a>，如果没有，每次单击切换页面时它都不知道去哪里并重定向到第一个并且永远不会更改页面。

这就是分页的样子。

    <ul class="pagination pull-right">
        <li><a href="#">&laquo;</a></li>
        <li ng-repeat="n in range" ng-class="{active: n === (currentPage -1)}" ng-click="setPage(n+1)"><a href="#/">{{n+1}}</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>

$ http data，TypeError：无法调用未定义的方法切片

1 个答案: