如何在http调用后在视图中更新范围变量值？

Question

我正在使用我的第一个项目Angularjs 1.4.3。

以我控制器我正在HTTP请求，在该HTTP请求的成功方法我更新一个范围可变。在http调用中，我获取最新值，但在视图方面它没有更新值。

Plunker Link（@rupesh_padhye谢谢）。 （因为它是调用的servlet动作，所以没有数据将被在Plunker示出）

app.controller('measuresCtrl', ['$scope', '$modal', '$http', function($scope, $modal, $http) { 



    $scope.groups = [] 
     $scope.loadAllMeasure = function() { 
      $http.get("fetchAllMeasure") 
      .success(function(data) { 
       console.log("Before insert"); 
       console.log($scope.groups); 

       $scope.groups = data.measures; 

       console.log("After insert"); 
       console.log($scope.groups); 
      }) 
      .error(function() { 
      }); 
     }; 

     $scope.loadAllMeasure(); 

$scope.submit = function (form) { 
$http({ 
     method: 'POST', 
     url: 'saveMeasure', 
     data: { 
       id: form.id, 
       name: form.name, 
       description: form.description 
       }, 
     headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
     }).success(function(data, status, headers, config) { 
      $scope.loadAllMeasure(); 
     }).error(function(data, status, headers, config) { 
    }); 
} 

}）

每当我的措施执行任何CRUD操作我打电话的方法$scope.loadAllMeasure();。但它不更新视图（jsp）页面中的值。

我试过$ scope。$ apply method，但是我得到Error: $digest already in progress。

当我使用的console.log内部成功方法，则打印的值为$ scope.groups其示出的最新值。

在我的看法（jsp）页面我只使用ng-repeat函数以表格格式显示所有记录。

代码为我的视图页面（最少的代码） -

<div ng-repeat="group in groups | orderBy:'name'"> 
    <div> 
     <input type="checkbox" id="checkbox-{{group.id}}" class="ui-checkbox" /><label for="checkbox-{{group.id}}">{{group.name}}</label> 
    </div> 
    <div>{{ group.description}}</div> 
    <div> 
      <div class="fa fa-pencil button" data="{{group.id}}" id="{{::elementId}}" ng-click="showEditForm(group.id, $event)"></div> 
      <div class="fa fa-trash button" data="{{group.id}}" ng-click="deleteGroup(group.id)"></div> 
      <div class="fa fa-clone button" data="{{group.id}}" id="{{::elementId}}" ng-click="showCloneForm(group.id, $event)"></div> 
    </div> 
</div> 

价值观的console.log被

Before insert 
Object { id=1, description="Measure Description1", name="Demo"}] 

而且

After Insert 
[Object { id=1, description="Measure Description1", name="Demo"}, Object { id=2, description="Description2", name="Demo2"}] 

如何更新小号在http调用之后应付变量值？

Answer 1

我看不到什么毛病你的示例代码。

我创建了一个JSFiddle来尝试和帮助你。

服务器调用已被setTimeout函数替换，该函数返回一个promise。

请参阅的jsfiddle https://jsfiddle.net/sjwkbzxa/

请参见下面的例子：

<div data-ng-controller="TestController as vm"> 
    <button data-ng-click="loadAllMeasure()">Load List from Server</button> 
    <ul> 
     <li data-ng-repeat="group in groups | orderBy:'name'"> 
      <span>{{group.description}}</span> 
     </li> 
    </ul> 
</div> 

的JavaScript：

angular.module('application',[]).controller("TestController", ['$scope', '$q', function($scope, $q){  
    $scope.groups = [{ id:1, description:"Initial List", name:"Demo"}]; 

    $scope.loadAllMeasure = function(){ 
     loadData().then(function(data){ 
     $scope.groups = data; 
     }); 
    }; 

    function loadData(){ 
     var deferred = $q.defer(); 
     setTimeout(function(){ 
      var data = [{ id:1, description:"Measure Description1", name:"Demo"}, { id:2, description:"Description2", name:"Demo2"}]; 
      deferred.resolve(data); 
     }, 3000); 
     return deferred.promise; 
    } 
}]); 

也许你缺少你身边的东西，我们不能看？

Answer 2

$scope.loadAllMeasure = function() { 
    CalltoServer(); 
}; 

CalltoServer = function() { 
    return $http.get("fetchAllMeasure") 
    .success(function(data) { 
     $scope.groups = data.measures; 
    }) 
    .error(function() { 
    }); 
} 

试试这个，成功将2〜3秒后，所以我需要RIST的事件中猜测绑定

Answer 3

我有点晚了回答这个问题，但这里是我的2美分：

服务器的数据（response.data）到$范围对象的简单分配没有似乎对我

工作

$scope.something = response.data //didn't work 

所以，我回到了一个承诺对象从服务到控制器中，然后用

angular.copy(response.data,$scope.something) 

复制从服务器返回的值。你也可以将$ scope.something作为函数的参数传递给服务，并在服务函数中使用angular.copy，但我不知道这是否是一种好的做法。

Answer 4

嘿，我也面临同样的问题，如果有人仍在寻找，它是由$ http变量中的$ scope变量引起的。我认为在成功函数内部正在创建一个新的$范围（一些原型继承的东西）。 所以使变量$范围的副本，像

var s = $scope; 

，然后改变

s.groups = someData; 

您的代码：

app.controller('measuresCtrl', ['$scope', '$modal', '$http', function($scope, $modal, $http) { 


var s = $scope; 
$scope.groups = [] 
    $scope.loadAllMeasure = function() { 
     $http.get("fetchAllMeasure") 
     .success(function(data) { 
      console.log("Before insert"); 
      console.log($scope.groups); 

      s.groups = data.measures; 

      console.log("After insert"); 
      console.log($scope.groups); 
     }) 
     .error(function() { 
     }); 
    }; 

    $scope.loadAllMeasure(); 

$scope.submit = function (form) { 
$http({ 
    method: 'POST', 
    url: 'saveMeasure', 
    data: { 
      id: form.id, 
      name: form.name, 
      description: form.description 
      }, 
    headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
    }).success(function(data, status, headers, config) { 
     $scope.loadAllMeasure(); 
    }).error(function(data, status, headers, config) { 
}); 
} 
}) 

Answer 5

分配新的数据到$范围变量之后请致电：

$ scope。$ digest（）;

这将更新当前范围值这里

参考：https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope