Question

我正在开发一个电子商务应用的角度迷你篮子，但是没有通过服务更新的范围变量有问题。

当我点击产品网格中的添加到购物篮按钮时，它会在产品网格控制器中激活upDateMiniBasket功能，该控制器中注入了UpdateMiniBasket服务。

控制器：

whiskyControllers.controller('whiskyListCtrlr', ['$scope', 'UpdateMiniBasket', '$http', 

    function($scope, UpdateMiniBasket, $http){
        $http.get('json/whiskies.json').success(function(data){
            $scope.whiskies = data;
        })

        $scope.updateMiniBasket = function(e){
            var targetObj = e.target.getAttribute('data-item');

            UpdateMiniBasket.getUpdate(targetObj);

        }
    }

])

这是服务：

whiskyrumApp.factory('UpdateMiniBasket', [function(){

    var miniBasketTotal = 0, 
        itemCount = 0;

    var miniBasketItems = [{
        imageUrl : '',
        name : 'There are currently no items in your basket',
        price: 0
    }]

    var getUpdate = function(obj){

        miniBasketTotal = 0;

        if(obj) {
            if(miniBasketItems[0].price === 0) miniBasketItems.pop();
            obj = jQuery.parseJSON(obj);
            miniBasketItems.push(obj);
        }

        for(var i = 0, j = miniBasketItems.length; i < j; i++){
            miniBasketTotal += parseFloat(miniBasketItems[i].price);
        }

        itemCount = miniBasketItems[0].price === 0 ? 0 : miniBasketItems.length;

        return {
            miniBasketItems : miniBasketItems,
            miniBasketTotal : miniBasketTotal,
            itemCount : itemCount
        }
    }

    return {
        getUpdate : getUpdate
    }

}]);

问题在于，当我添加产品时，该函数会触发并调用服务ok，但是应该更新篮子中的项目数量的范围变量不会更新。这个变量存在于另一个微控制器的控制器中，该控制器也注入了UpdateMiniBasket服务。

whiskyControllers.controller('miniBasketCtrlr', ['$scope', 'UpdateMiniBasket',

    function($scope, UpdateMiniBasket){

        var mbItems = UpdateMiniBasket.getUpdate();

        $scope.miniBasketItems = mbItems.miniBasketItems;
        $scope.itemCount = mbItems.itemCount;

}])

这是html：

<div class="mini-basket grey-box" ng-controller="miniBasketCtrlr">

    <a href="#" data-toggle="dropdown" class="btn dropdown-toggle">
        {{itemCount}} Items
    </a>
   <!-- the ng-repeat code for the mini basket which works fine -->

我只是假设当服务中的变量更新时，它会反馈到另一个控制器中的作用域var，因为它们都链接到同一个服务。我想也许我需要添加$ watch，因为我无法理解为什么这个{{itemCount}}没有更新。任何帮助将不胜感激。

Answer 1

如果更改UpdateMiniBasket工厂的返回对象而不是返回项目计数的原始值，而是返回如下函数：

return {
    miniBasketItems : miniBasketItems,
    miniBasketTotal : miniBasketTotal,
    itemCount : function () {
        return itemCount;
    }
}

然后在您的控制器中将绑定更改为$scope到此：

$scope.itemCount = function () {
    return mbItems.itemCount(); 
};

然后，您只需将html中的绑定更改为{{ itemCount() }}，然后当工厂中的值更新时，此值应成功更新。

我在jsbin上有一个简化的解决方案：http://jsbin.com/guxexowedi/2/edit?html,js,output

控制器中的角度范围变量在服务中更改值时不更新

1 个答案: