在控制器的角度范围的变量没有更新时值在服务改变(angular scoped variable in

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

当我点击一个附加在产品网格它触发在具有注入到它的服务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
    }

}]);

问题是，当我添加一个产品，功能火灾和调用服务正常，但应该更新篮子物品的量的范围变量没有更新。 这个变量住在另一个控制器也注入了德UpdateMiniBasket服务minibasket。

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在其他控制器，因为它们都连接到相同的服务。 我想，也许我需要添加一个$手表，因为我不能明白为什么这个{{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

文章来源: angular scoped variable in controller not updating when value changed in service