Question

我希望我的导航栏可以计算放在篮子里的物品。

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

<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刷新计数更新......我怎么能解决这个问题？

修改：

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.

离子标题项目计数

1 个答案: