在AJAX请求和视图更改后,$ scope不会更新

时间:2014-07-29 02:30:26

标签: angularjs

我一直无法解决我的问题。这是我想要实现的目标,它有效http://jsfiddle.net/NEuJ6/56/。按下按钮时,视图会更改,范围也会更新。

但是,当我尝试使用以下代码在我的项目上执行此操作时,即使使用$ scope也不会应用$ scope更改。$ apply(); 。视图更改并且$ scope.foods正确更新。但是,现在用于显示返回项目列表的列表页面不会更新。但是,如果将按钮添加到列表页面并按下它,则页面将使用新的$ scope.foods项目更新。这意味着该问题与更改视图和更新范围有关。但是,在我简单的小提琴中,我可以更改视图并更新范围而不会出现问题。

$scope.getFoods = function(){
        $scope.foods = '';
        $location.path('/list');
        $http({
            url: 'http://127.0.0.1:8000/getfoods/',
            method: "POST",
            data: {address: $scope.location.address, cuisine: $scope.filters.cuisine},
            headers: {'Content-Type': 'application/json'}
        }).success(function (data) {
                $scope.foods = data;
                console.log($scope.foods);
                $scope.$apply();
        }).error(function (data, status) {
                console.log(status);
            }); 
    };

感谢帮助,谢谢。

1 个答案:

答案 0 :(得分:0)

我的一个项目遇到了同样的问题。这对我有用。

试试这个:

        $http({
        url: 'http://127.0.0.1:8000/getfoods/',
        method: "POST",
        data: {address: $scope.location.address, cuisine:        $scope.filters.cuisine
            },
        headers: {'Content-Type': 'application/json'}
    }).success(function (data) {

            $scope.$apply(function(){ // put $scope var that needs to be updated
            $scope.foods = data;      // inside a function inside $apply like this
            console.log($scope.foods);
       });
          }).error(function (data, status) {
            console.log(status);
        });