값 변경시 컨트롤러의 각도 범위 변수가 업데이트되지 않습니다.

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 서비스가 삽입 된 미니 바스켓의 다른 컨트롤러에 있습니다.

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

    function($scope, UpdateMiniBasket){ 

     var mbItems = UpdateMiniBasket.getUpdate(); 

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

}]) 

그리고 이것은 HTML입니다 : 난 그냥 서비스에서 변수가 업데이트 될 때 그들은 모두 연결되어로, 즉 다른 컨트롤러의 범위 VAR를 통해 공급한다고 가정

<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}}가 업데이트되지 않는지 알 수 없으므로 $ watch를 추가해야 할 필요가 있다고 생각했습니다. 도움을 주시면 대단히 감사하겠습니다.

Answer 1

당신이 당신의 UpdateMiniBasket 공장의 반환 객체를 변경하는 대신 항목의 카운트하지만 다음과 같은 기능의 프리미티브 값을 반환하는 경우 :

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

그리고 컨트롤러에 $scope에 바인딩 변경 여기에 :

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

그런 다음 바로 {{ itemCount() }}에 html로 바인딩을 변경해야하고이 값이 성공적으로 업데이트해야 할 때 공장 업데이트의 값.

는 여기 jsbin에 이에 대한 간단한 해결책을 가지고 : http://jsbin.com/guxexowedi/2/edit?html,js,output