Angular JS无法更新数据

Question

我有一个控制器，它负责将产品项目添加到购物车。一切都很好，请求发送，获取响应数据，但我无法更新HTML中的数据（请参阅图像）。

我试图把它与$scope.$apply(); $scope.$watch写，但我从rootScope and $digest

Error: [$rootScope:inprog] http://errors.angularjs.org/1.4.8/ $rootScope/inprog?p0=%24digest

越来越如果我不使用$应用，数据没有更新。

这里是我的代码。

<a href="">Pr: {{cart.count}} <br/> Summ. {{ cart.summ | number:2 }}</a> 

---

shopApp.factory('shop', ['$http', function($http) { 
    return $http.get('/ajax/get_shop.ajax') 
    .success(function(data) { 
     return data; 
    }) 
    .error(function(err) { 
     return err; 
    }); 
}]); 

---

shopApp.controller('ShopController', ['$scope','$http','$timeout','shop', function($scope,$http,$timeout,shop) { 
$scope.cart = null; 
shop.success(function(data) { 
    $scope.cart = data;   
}); 
$scope.addToCart = function() { 
    var pr_price = parseInt(angular.element("#pr_price").val(),10); 
    var pr_id = angular.element("#pr_id").val(); 
    if(pr_price!= ""){ 
     return $http({ 
      method : 'POST', 
      url : '/ajax/add_to_cart.ajax', 
      data : 'pr_price=' + json_obj + '&pr_id='+pr_id , 
      headers : { 
       'Content-Type' : 'application/x-www-form-urlencoded' 
      } 
     }) 
     .success(function (shopping_data,status) { 
      if (status == 200){ 

       $scope.cart = shopping_data;  
       console.log(shopping_data);//everything is ok 


      }  
     }).error(function(err) { 
      return err; 
     }); 
    }  
}; 
}]); 

Answer 1

在棱角分明，就像你在这里做你永远不应该更新DOM：

angular.element("#rct_success_alert").html('<div><a href=""><h3>Product Successfully added to your cart</h3></div><div>'+shopping_data.count+' Items</a></div>'); 

而且你不需要apply这里：

$scope.$apply(function(){ 
     $scope.cart = shopping_data; 
    }); 

只是为它分配和角度将其绑定到模板：

$scope.cart = shopping_data; 

你的工厂可以更容易过多：

shopApp.factory('shop', ['$http', function($http) { 
    return $http.get('http://echo.jsontest.com/count/123/summ/234'); 
}]); 

我有created a JSBin调用一个JSON回声服务器，如果您看不到结果，请在浏览器中转到http://echo.jsontest.com/count/123/summ/234，并确保它不超过配额。

Answer 2

的问题是在你的店工厂，你要么调用成功功能在服务控制器或不是两次。尝试是这样的：

shopApp.factory('shop', ['$http', function($http) { 

    var shop = {}; 

    shop.getCart = function() { 
     return $http.get('/ajax/get_shop.ajax'); 
    }; 

    return shop; 

}]); 

而在你ShopController：

shop.getCart() 
    .success(function(data) { 
     $scope.cart = data;   
    }) 
    .error(function() { 
     // Do Something Cool Here 
    });