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

我正在为电子商务应用程序开发一个小型购物篮，但存在范围变量不通过服务更新的问题。控制器中的角度范围变量在值更改时不更新

当我点击产品网格中的添加到购物篮按钮时，它会触发产品网格控制器中的注册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}}没有更新。任何帮助将不胜感激。

来源

2014-12-02 Mike Alizade

试着改变你的.factory到。服务。 http://stackoverflow.com/questions/15666048/service-vs-provider-vs-factory – supafabulous 2014-12-02 14:14:26

这没有奏效 – 2014-12-02 14:35:57

如果您改变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

来源

2014-12-02 14:55:37

非常感谢。这工作，但我不明白为什么一个功能的作品和一个原始值不。 – 2014-12-02 15:07:09

它与原型在JavaScript中的工作方式有关。原始值在作用域上创建一个“影子”值，当它在工厂中的其他位置更新时，该属性未得到更新。当JavaScript中的类型（如Object或Array）不会创建“影子”时，它们会与原始属性绑定，或者当更改发生时都会更改。 – 2014-12-02 15:19:55

谢谢！试图用一个对象来实现这一点，它不起作用，但它有一个功能 – BIU 2015-04-08 14:10:14

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

回答

相关问题