离子 header 项计数

Question

我希望我的 nav-bar 能够计算放在篮子里的物品。

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>

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

这里是 navBarCtrlreturns 个来自 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 刷新计数更新...我该如何解决？

编辑:

计数 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);
            },

Answer 1

我猜你的导航栏放在 index.html 中，所以它不像注入 ng-view 的导航栏那样被视为部分视图。这样你的导航栏控制器只初始化一次，所以你的服务也将被调用一次。在这种情况下，我可以想到一些解决方案：

解决方案 1

创建一个 Angular 服务，该服务将提供一种方法来更新导航栏中的项目数。想一想您的应用程序中应该更新此计数的可能位置（例如，在将商品添加到购物车之后）并在那里调用更新方法。

解决方案 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);
            });
}

这可以在导航栏控制器中完成，因为它在应用程序中只加载一次。

解决方案 3

您可以设置更新购物篮计数器的时间间隔，例如一分钟10次左右。

var intervalTimeMs = 6000;

$interval(updateBasketCounter, intervalTimerMs);

如果可以从应用程序外部更新购物篮计数器，这将是一个很好的解决方案。否则，我会坚持解决方案 1 或 2。

离子 header 项计数

Ionic header item count

count

navbar

angularjs

ionic-framework