Angularjs передает переменную на завод с контроллера

Question

Я пытаюсь создать базовую разбивку на страницы. Бэкэнд готов и протестирован. Каждая страница содержит 10 видов деятельности.

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

Я хочу начать с 1 и приращению номер страницы на единицу (и загружать данные нужной страницы в страницу), когда кнопка нажата, но я ничего не вижу на странице, когда я его просмотра. incr() также не работает, выбросы

TypeError: t.data.push is not a function

ошибка. (I use Gulp)

В чем проблема?

Url маршрутизации (я использую функцию решимость UI-маршрутизатора)

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 бесполезным, поэтому я попросил вас его удалить .. следовательно, второе исправление.

Первое исправление просто передает $scope.data, а так как $scope.data будет ссылкой, поэтому изменения будут отражены внутри variable.