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

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 
    } 

}]); 

的问题是，当我添加一个产品，功能火灾和调用服务确定，但一个作用域变量应更新篮子中的物品数量不更新。此变量存在于另一个控制器中，用于注入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在其他控制器，因为它们都连接到相同的服务。我想也许我需要添加一个$ 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