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

Question

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

在我的控制器中，我正在发出一个http请求，在这个 http 请求的成功方法中，我正在更新一个范围变量。在 http 调用中，我获得了最新值，但在视图端它没有更新值。

Plunker 链接 （@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方法，但我得到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

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

$scope.$digest();

这将更新当前范围值

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