Question

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

我试图用$scope.$apply(); $scope.$watch来写它但我从rootScope and $digest

开始

错误：[$ rootScope：inprog] http://errors.angularjs.org/1.4.8/ $ rootScope / inprog？P0 =％24digest

如果我不使用$ apply，则数据不会更新。

这是我的代码。

<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

在Angular中，你不应该像在这里那样更新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;
  });

只需指定它，Angular就会将其绑定到模板：

 $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 echo服务器，如果您没有看到结果，请转到浏览器中的http://echo.jsontest.com/count/123/summ/234并确保它没有超过配额。< / p>

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
    });

Angular JS无法更新数据

2 个答案: