在控制器的角度范围的变量没有更新，当值的改变服务 [英] angular scoped variable in controller not updating when value changed in service

问题描述

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

I'm developing a mini-basket in angular for an ecommerce application but have a problem with a scoped variable not updating via a service.

当我点击一个附加在产品网格它激发其具有注入它UpdateMiniBasket服务产品网格控制器的功能upDateMiniBasket篮下按钮。

When i click on an add to basket button in the product grid it fires the upDateMiniBasket function in the product grid controller which has the UpdateMiniBasket service injected into it.

控制器：

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。

The problem is that when I add a product, the function fires and calls the service ok, but a scoped variable that should update the amount of items in the basket is not updating. This variable lives in another controller for the minibasket that also has teh UpdateMiniBasket service injected.

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

我刚假定当在服务中的变量被更新，这将通过供给到范围变种中的其他控制器，因为它们都连接到相同的服务。我想也许我需要添加一个$眼睁睁的看着我不能明白为什么这个{{ITEMCOUNT}}没有更新。
任何帮助将大大AP preciated。

I just assumed that when the variables in the service are updated, that would feed through to the scoped var in the other controller as they are both linked to the same service. I thought maybe I need to add a $watch as I cant see why this {{itemCount}} is not updating. Any help would be greatly appreciated.

推荐答案

如果你改变你的 UpdateMiniBasket 工厂返回对象，而不是为计数返回原始值项目而是一个功能类似如下：

If you change the return object of your UpdateMiniBasket factory to instead of returning the primitive value for the count of items but to a function like below:

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

然后在你的控制器来更改绑定到 $范围来的：

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

您应该然后只需要更改HTML的结合 {{ITEMCOUNT（）}} 键，那么这个值应该成功更新时，在工厂更新值

You should then just have to change the binding in the html to {{ itemCount() }} and this value should then successfully update when the values in the factory update.

我有一个简单的解决方案，这对jsbin这里：的http：// jsbin .COM / guxexowedi / 2 /编辑？HTML，JS，

I have a simplified solution to this on jsbin here: http://jsbin.com/guxexowedi/2/edit?html,js,output

这篇关于在控制器的角度范围的变量没有更新，当值的改变服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！