---解释

Question

我正在尝试创建一个基本的分页。后端准备好并经过测试。每个页面包含10个活动。

/feed/1 -> displays 0-10
/feed/2 -> displays 10-20
/feed/3 -> displays 20-30

我想从1开始并在单击按钮时将页码增加1（并将该页面的数据加载到页面中），但在查看时我无法在页面上看到任何内容。 incr（）也不起作用，抛出

TypeError：t.data.push不是函数

错误。（我用Gulp）

这里有什么问题？

网址路由（我使用ui-router的解析功能）

angular.module('site.feed.routes')

.run(
  ['$rootScope', '$state', '$stateParams',
    function($rootScope, $state, $stateParams) {
      $rootScope.$state = $state;
      $rootScope.$stateParams = $stateParams;
    }
  ]
)

.config(
  ['$stateProvider', '$urlRouterProvider', '$locationProvider',
    function($stateProvider, $urlRouterProvider, $locationProvider) {

      $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
      });

      $stateProvider
        .state('posttest', {
          url: '/feed',
          templateUrl: 'feed.html',
          resolve: {
            data: 'PostData',
          },
          controller: 'PostController'
        });
    }
  ]
);

厂

angular.module('site.feed').factory('PostData', ["$http", function($http) {

  return {
    getPage: function(pageNumber) {
      return $http.get('/feed/' + pageNumber).then(function(response) {
        return response.data;
      });
    }
  };
}]);

控制器

angular.module('site.feed').controller('PostController', ['$scope', 'data', 'PostData', function($scope, data, PostData) {
  $scope.page = 1;
  $scope.data = data; // first page

  $scope.incr = function() {
    $scope.page++;
    PostData.getPage($scope.page).then(function(returned) {
      $scope.data.push(returned.data);
    });

  };
}]);

feed.html

<div ng-repeat="feedflow in data">
  <div ng-repeat="ehe in feedflow.feed">
    {{feedflow.id}}
    {{ehe.status}}
  </div>
</div>

{{page}}
<button ng-click="incr()">Increment by one</button>

Answer 1

快速解决方法是将数据传递给工厂并让它更新变量，因为它将是一个很好的参考。

getPage: function(pageNumber, data) {
  return $http.get('/feed/' + pageNumber).then(function(response) {
    data.push(response.data);
  });
}

并且在调用factory

时

PostData.getPage($scope.page, $scope.data);

另一个修复很简单，只需删除then部分。

getPage: function(pageNumber) {
  return $http.get('/feed/' + pageNumber);
}

---解释

因为您在承诺上调用多个... 首先进入服务

then(function(response) {
   return response.data;
});

第二个是。

PostData.getPage($scope.page).then(function(returned) {
   $scope.data.push(returned.data);
});

当你附加多个then时，每个人都会被一个接一个地调用。你的代码的问题是你在第一个then返回，这阻止了第二个执行..我发现你的第一个then无用，所以我请你删除它..因此第二个修复。< / p>

首次修复只需传递$scope.data，因为$scope.data将成为引用，因此修改将反映在variable内。

Angularjs从控制器

1 个答案:

---解释