Ionic Header item count

Question

Ich möchte, dass meine Nav-Leiste in der Lage ist, in den Warenkorb gelegte Objekte zu zählen.

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

Hier ist das nav-bar Teil:

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

Und hier ist navBarCtrl das Element aus API zählen zurückgibt:

.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); 
      }); 
    }]) 

Problem:

Beim Wechseln zwischen den Ansichten wird die Anzahl nicht aktualisiert, und wenn das Chrome Inspection Tool verwendet wird, zeigt das Netzwerk an, dass die Route nicht mehr als einmal aufgerufen wird, wenn ich die App starte. Wenn ich mit F5 auffrische, wird die Anzahl aktualisiert ... wie kann ich das beheben?

EDIT:

Count Update in 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, 
     ]); 
    } 

Ich habe versucht, auch manuell einstellen, wenn Artikel in den Warenkorb gelegt, so dass die lokale Speicherung Updates verwendet wird:

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

        //... 

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

Answer 1

Ich vermute, dass Ihre Navbar in index.html platziert ist, so wird es nicht als Teilansicht behandelt wie diejenigen, die sind mit ng-view injiziert. Auf diese Weise wird Ihr Navbar-Controller nur einmal initialisiert, so dass Ihr Dienst auch einmal aufgerufen wird. Ich kann in diesem Fall von wenigen Lösungen denken:

Lösung 1

einen Winkel Service erstellen, die ein Verfahren zur Verfügung stellt Artikel im navbar zählen zu aktualisieren. Denken Sie an mögliche Stellen in Ihrer Anwendung, an denen diese Anzahl aktualisiert werden soll (z. B. nach dem Hinzufügen eines Artikels zum Warenkorb), und rufen Sie dort die Aktualisierungsmethode auf.

Lösung 2

Wenn Sie den Zähler nach Routenänderung aktualisieren möchten, können Sie einen Handler für $locationChangeStart Ereignis zuordnen können:

$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); 
      }); 
} 

Diese in navbar Controller getan werden könnte, wie es nur geladen einmal in der Anwendung.

Lösung 3

ein Intervall eingestellt werden, die beispielsweise Korbzähler aktualisieren 10 mal pro Minute oder so.

Dies wäre eine gute Lösung, wenn der Warenkorb-Zähler von außerhalb der Anwendung aktualisiert werden könnte. Ansonsten würde ich bei Lösung 1 oder 2 bleiben.