如何在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