2016-06-05 3 views
0

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

Часть index.html:

<ion-nav-bar class="bar-dark" ng-controller="navBarCtrl"> 
      <ion-nav-back-button class="button-icon icon ion-ios-arrow-back"></ion-nav-back-button> 
      <ion-nav-buttons side="secondary"> 
       <div ng-include="" src="'templates/partials/navigation.html'"></div> 
      </ion-nav-buttons> 
     </ion-nav-bar> 

Вот нав-бар парциального:

<div> 
    <a class="button button-icon icon ion-person" ng-href="#/editUserDetails"></a> 
    <a class="button button-icon icon ion-android-cart" ng-href="#/cart"> 
     <span class="badge badge-assertive">{{item.count}}</span> 
    </a> 
    <button class="button button-icon icon ion-android-more-vertical" ng-click="showActionsheet()"></button> 
</div> 

А вот navBarCtrl, которая возвращает количество элементов из API:

.controller('navBarCtrl', ['Injection', '$scope', '$http', 'SERVER', function (Injection, $scope, $http, SERVER) { 
     Injection.ResourceFactory.getResource($http, SERVER, 'order/itemCount') 
      .then(function (response) { 
       $scope.item = {count: response.data.itemCount}; 
       localStorage.setItem('countItem', response.data.itemCount); 
      }); 
    }]) 

задачи:

При переходе между видами счетчик не обновляется, а при использовании инструмента проверки Chrome сеть показывает, что маршрут не вызывается более одного раза при запуске приложения. Если я обновляюсь с F5, количество обновлений ... как я могу это исправить?

EDIT: обновление

Количество в API (Laravel PHP):

public function orderItemCount() 
    { 
     $user = $this->authUserAndCreateOrder(); 
     $count = $user->orders->last()->order_items->count(); 
     if (!empty($count)) { 
      return Response::json([ 
       'itemCount' => $count, 
      ]); 
     } 
     return Response::json([ 
      'itemCount' => 0, 
     ]); 
    } 

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

confirmAddingToCartPopup: function ($ionicPopup, $state, $scope) { 
       $ionicPopup.confirm({ 

        //... 

       }); 
       $scope.item = {count:localStorage.getItem('countItem')}; 
       localStorage.setItem('countItem', ++$scope.item.count); 
      }, 
+0

Отправьте код, в котором вы увеличиваете счет. – theblindprophet

+0

$ scope внутри навигационного контроллера не совпадает с контроллером с методом 'confirmAddingToCartPopup'. Вот почему $ scope.item не обновляется. Вы должны создать угловое обслуживание или завод, где вы будете хранить свой счетчик (см. ** решение 1 ** в моем ответе - я могу предоставить код режима, если вам нужно). Не назначайте новый объект этому счетчику, как 'service.item = {count: newValue}', поскольку вы будете использовать ссылку на это. Просто измените свойство 'count'. Таким образом, вы сможете поделиться значением между контроллерами. – PJDev

ответ

1

Я полагаю, что ваш навигатор размещен в index.html, поэтому он не рассматривается как частичный вид, такой как те, которые являются вводили ng-view. Таким образом, ваш навигационный контроллер инициализируется только один раз, поэтому ваш сервис будет вызываться один раз. Я могу думать о нескольких решений в этом случае:

Решения 1

Создать угловую службу, которая будет обеспечивать способ обновления числа пунктов в вашей навигационной панели. Подумайте о возможных местах в вашем приложении, где этот счет должен быть обновлен (например, после добавления элемента в корзину) и вызовите метод обновления там.

Решение 2

Если вы хотите обновить счетчик после изменения маршрута, вы можете прикрепить обработчик для $locationChangeStart события:

$scope.$on('$locationChangeStart', function(event) { 
    updateBasketCounter(); 
}); 

function updateBasketCounter() { 
    Injection.ResourceFactory.getResource($http, SERVER, 'order/itemCount') 
      .then(function (response) { 
       $scope.item = {count: response.data.itemCount}; 
       localStorage.setItem('countItem', response.data.itemCount); 
      }); 
} 

Это может быть сделано в контроллере NavBar, как это только загружается один раз в приложении.

Решение 3

Вы можете установить интервал, который будет обновлять счетчик корзины, например, 10 раз в минуту.

var intervalTimeMs = 6000; 

$interval(updateBasketCounter, intervalTimerMs); 

Это было бы хорошим решением, если счетчик корзины мог быть обновлен вне приложения. В противном случае я буду придерживаться решения 1 или 2.

Смежные вопросы