Просмотр не обновляется при нажатии новых элементов в массиве - AngularJS

Question

У меня проблема, что, к сожалению, я не смог решить какое-то время, даже глядя на связанные с ним StackOverflow Q/A.

Я строю приложение, использующее MEAN и у меня вопрос , когда мне нужно сделать новые пункты корыта ng-repeat.

У меня есть много предметов, хранящихся в экземпляре MongoDB, и я прекрасно понимаю, что я могу получить все из них через вызовы API.

Мне нужно показать только 24 элемента в самом начале и еще 24 часа каждый время, когда пользователь нажимает на кнопку . Подробнее button. Мне всегда нужно объединить их после старых.

Он отлично работает с первыми 24 элементами, но не отображает другие предметы.

Когда я пытаюсь зарегистрировать новые элементы, я получаю их без проблем. Я могу видеть их атрибуты и так далее.

Это кратчайшее из моих деталей Просмотра:

<div class="myItem" ng-repeat="item in searchCtrl.items track by $index"> 
    . . . . 
</div> 

Это мой Показать больше Кнопки:

<a class="showMoreButton" ng-click="searchCtrl.goToNextPage()">show more</a> 

Это упрощенная версия моего контроллера, также известный как searchCtrl:

function SearchController($scope, ItemFactory) { 

    var vm = this; 

    //Needed for pagination, 24 items at a time, starting from page 1 
    vm.searchParams = { 
    size : 24, 
    page : 1 
    }  

    //Initialize Empty Array to Contain Items 
    vm.items = []; 

    /*Calling fetchItems to fetch the items the very 
    first time the Controller is called*/ 
    fetchItems(); 

    //Calls goToPage passing it a new page (It handles pagination) 
    vm.goToNextPage = function() { 
    var next = parseInt(vm.info.currentPage) + 1; 
    vm.goToPage(next); 
    }; 

    //Calls fetchItems after setting the new page 
    vm.goToPage = function(page) { 
    vm.searchParams.page = page; 
    fetchItems(); 
    };  

    //Calls getItems and pushes the single items into vm.items 
    function fetchItems(){ 
    ItemFactory.getItems(vm.searchParams).then(function(response){ 

     //iterates trough items 
     for (var i = 0; i < response.data.data.length; i++) { 
      //Log current item 
      console.log(JSON.stringify(response.data.data[i])); 
      //push current item into vm.items 
      vm.items.push(response.data.data[i]); 
     } 

     //Print correctly the new items pool 
     console.log(vm.items); 

    }, function(error){ 
     $log.error(error); 
    }); 
    }  

}; 

Это упрощенная версия моего ItemFactory:

angular.module('myApp').factory('ItemFactory', 
       function ($http, API_URL) { 

    //Getting items from API 
    function getItems(params) { 

    return $http.get(API_URL + '/item',{params: params} 
    ).then(function success(response) { 

     return response; 
    }); 
    } 

    return { 
    getItems : getItems 
    } 

}); 

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

'use strict'; 
angular.module('myApp') 
.config(itemRoute); 

function itemRoute($stateProvider) { 
    $stateProvider 
     .state('index.items', { 
      url    : 'index/items', 
      parent   : 'index', 
      templateUrl  : 'app/main-pages/items/items.html', 
      controller  : 'SearchController', 
      controllerAs : 'searchCtrl' 
    }); 
} 

Я также попытался использовать concat вместо зацикливания пунктов корыта с for, но результат не меняется:

//Instead of looping 
vm.items = vm.items.concat(response.data.data); 

По существу :

• Я только в состоянии оказать первые 24 пунктов
• Я не могу вынести все другие элементы, даже если они получают правильно вставлены в элементах массив
• товаров, начиная с 25 и так далее, не попасть в DOM
• Я уже пробовал использовать $scope.$apply();, но я получаю digest errors

Вопросы:

1. Что является причиной этого?
2. Как я могу решить эту проблему?

Заранее благодарю, если вам нужно уточнить пожалуйста только отправьте комментарий ниже.

Answer 1

Мне удалось решить эту проблему, передавая сообщение от ItemFactory при получении новых элементов и прикреплении слушателя к этому сообщению в SearchController. Когда передается ItemDataRefresh, тогда SearchController объединяет новые данные.

ItemFactory:

function getItems(params) { 

    return $http.get(API_URL + '/item',{params: params} 
    ).then(function success(response) { 
     $rootScope.$broadcast('refreshData', response.data); 
     return response; 
    }); 
} 

SearchController:

function fetchItems(){ 
    ItemFactory.getItems(vm.searchParams).then(function(response){ 

     //When vm.items is empty 
     if (!vm.items.length) { 
     vm.items = vm.items.concat(response.data.data); 
     } 

     //on refreshData 
     $scope.$on('refreshData', function(event, data){ 
     vm.items = vm.items.concat(data.data); 
     }); 

    }, function(error){ 
     $log.error(error); 
    }); 
} 

Я знаю, что я не должен использовать rootScope поэтому я до сих пор ищет пути, чтобы заставить его работать в очистителя путь.

Надеюсь, это поможет кому-то.