$http 数据，TypeError：无法调用未定义的方法切片答案

【问题标题】：$http data, TypeError: Cannot call method slice of undefined$http 数据，TypeError：无法调用未定义的方法切片
【发布时间】：2015-12-25 19:22:07
【问题描述】：

我已经构建了一个带有过滤器、排序、限制和分页系统的表格。使用来自 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

【问题讨论】：

你不能只为 $scope.data 分配一个默认的空数组，或者如果 inputArray 是数组，则检查你的过滤器吗？
我尝试检查我的输入 if(inputArray.isArray){return inputArray.slice(start, start + pageSize);} 但这不起作用，如果我将默认的空数组分配给$scope.data 在页面加载时不会显示任何进入表的条目：/
if( angular.isArray(inputArray) )
它也不起作用，因为在控制器内部我还想检索 numPages 中的 $scope.data.length。另外我在两个 $watch 中使用 $scope.filtered.length 重新计算 numPages，当控制器初始化时它变成未定义。

标签： javascript angularjs pagination xmlhttprequest client-side

【解决方案1】：

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

我的问题是 $scope.data（来自服务器的请求）在控制器初始化时未定义，所以我所做的是设置一个路由并在初始化控制器之前等待承诺解决。

我遇到的一个问题是无法将 .factory 直接注入到 .config 中，因此我必须将 $provide 注入到我的 .config 中并为它提供我的服务。

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

.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>

【讨论】：