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

Question

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

在我的控制器中，我正在发出 http 请求，在此 http 请求的 success 方法中，我正在更新范围变量。在 http 调用中，我得到了最新的值，但在视图方面它没有更新值。

Plunker Link（谢谢@rupesh_padhye）。 （由于调用的是servlet action，所以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 方法，但我得到了Error: $digest already in progress。

当我在 success 方法中使用 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

将新数据分配给 $scope 变量调用后：

$scope.$digest();

这将更新当前范围值

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

Answer 2

我看不出你的示例代码有什么问题。

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

服务器调用已替换为返回承诺的 setTimeout 函数。

请看 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 3

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

将服务器数据 (response.data) 简单地分配给 $scope 对象似乎对我不起作用

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

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

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

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

Answer 4

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

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

试试这个，2 到 3 秒后会成功，所以我猜在事件中它需要 rist 来绑定

Answer 5

嘿，我也遇到了同样的问题，如果有人还在寻找，那是由 $http 中的 $scope 变量的变化引起的。我认为在成功函数中创建了一个新的 $scope（一些原型继承的东西）。 所以复制变量 $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) {
});
}
})