ajax 更新页面变量,关于ajax：scope变量添加数据后未更新(在查看页面上)

我在用角度JS构建购物车。 它的工作方式类似于此用户单击项目函数addToCart将其添加到数据库

然后在te页面上，我有一个购物车，其中显示购物车内容。 所以在addToCart方法中，我更新了cart ..并想显示数据。

奇怪的是$ scope.cart在控制台中显示了所有对象...因此一切正常...但是在视图页面上，{{cart}} var仅显示[]，并且不会被更新。 通常每个var都会自动更新，但是由于某种原因，它不会：

控制器(向下细分)

c2App.controller('MakeOrderController', function($scope, $rootScope, $http, $location, $routeParams, ShareData, ngDialog) {

//there are more cvars here ... but those are not important

$scope.cart = [];

$scope.addToCart = function() {

$http({

url:"http://localhost/c2api/addtocart",

method: 'POST',

data:

{

'sessionid' : $rootScope.sessionid,

'menuId' : $scope.menuid,

'catId' : $scope.catid,

'resId' : $scope.resid,

'singleCat' : $scope.singleCat,

'multiCat' : $scope.multiCat,

'singleMenu' : $scope.singleMenu,

'multiMenu' : $scope.multiMenu,

'qty' : $scope.qty

},

headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}

}).success(function(data){

//update the cart

$scope.getCart($rootScope.sessionid,$scope.resid);

}).error(function(err){"ERR", console.log(err)});

};

$scope.getCart = function (ses,resid) {

if (!angular.isUndefined(ses) && !angular.isUndefined(resid)) {

$http({

url:"http://localhost/c2api/getcart",

method: 'GET',

params: {resId: resid, ses: ses},

headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}

}).success(function(data){

//SET CART DATA

$scope.cart = data;

console.log($scope.cart);//

}).error(function(err){"ERR", console.log(err)});

} else {

console.log('error.....');

}

}

});

并在视图上：

{{cart}}

当我在$ scope.cart上加载一些var时...确实在视图上显示了它..因此由于某种原因它不会更新

//更新

当我使用$ rootScope.cart = data并显示{{$ root.cart}} ...数据确实显示.....

您是否在html上添加了ng-app和ng-controller指令？

是的..请注意，如果我更改$ scope.cart var的内容，它将显示在视图页面上。...如果未声明控件和应用，将无法正常工作

问题是视图上的{{cart}}在单独的范围内。 检查范围继承以了解此现象。 为了避免使视图的范围与控制器的范围混淆，可以将控制器用作语法(首选)，或者在控制器上进一步定义$scope.cart。

即在控制器中使用$scope.order.cart，在视图中使用{{order.cart}}。

推送数据后尝试重新加载DOM。

$scope.cart.push(data);

$route.reload();

已经做到了....不起作用....数据被推送，日志显示数据..但是视图上的var无法更新

您可以使用jsfiddle显示完整代码吗？ HTML和JS。

让我们继续聊天中的讨论。

确实很奇怪，您是否尝试过$ apply？ $ apply强制更新。

scope.$apply(function (){

$scope.cart = data;

});

在较大的视图中：

}).success(function(data){

//SET CART DATA

$scope.cart = data;

console.log($scope.cart);//

$scope.$apply(function (){

$scope.cart = data;

});

}).error(function(err){"ERR", console.log(err)});

添加它会返回此错误：错误：[$ rootScope：inprog] errors.angularjs.org/undefined/$rootScope/inprog?p0=%24digest at Error(native)).......等等

但是我做了$ scope。$ apply(function(){...范围不起作用(ReferenceError：范围未定义)

我的错误是，示波器前面缺少$。

您是否有子控制器或某种嵌套代码？