$ scope変数でデータが更新された後でもUIが更新されない

Question

サービスを介してビューのデータを取得していて、angular.copy（）を使用してローカル変数に割り当てています。

var init = function() { 
     $scope.product = angular.copy(EditItemFactory.getSelectedItem()); 

    } 

View of my UI after calling init function

$scope.UpdateItem = function (data) { 
     console.log(data); 
     var Data = DataFactory.UpdateItem(data); 

     if (parseInt(Data) != 0) { 

      $modalInstance.dismiss('Close'); 
     } else { 
      console.log(Data); 
     } 
    } 

私は、DB内のアイテムや店舗を更新する更新機能を渡しています。

しかし、DBに更新後のデータはここでUI

に更新されているが、私のコントローラの完全なコードです：

(function() { 

var productEditCtrl = function ($scope, $modalInstance, EditItemFactory, DataFactory) { 




    $scope.cancel = function() { 
     $modalInstance.dismiss('Close'); 
    }; 

    $scope.UpdateItem = function (data) { 
     console.log(data); 
     var Data = DataFactory.UpdateItem(data); 

     if (parseInt(Data) != 0) { 

      $modalInstance.dismiss('Close'); 
     } else { 
      console.log(Data); 
     } 
    } 

    var init = function() { 
     $scope.product = angular.copy(EditItemFactory.getSelectedItem()); 

    } 

    init(); 
} 
productEditCtrl.$inject = ['$scope', '$modalInstance', 'EditItemFactory', 'DataFactory'] 
angular.module("SplitWise").controller("productEditCtrl", productEditCtrl)()) 

私はUIの変更をバインドする方法を取得しておりません。

注：私は後にのみ更新されたデータをDBにに格納されて

データファクトリーコードUIを更新する：

(function(){ 

var DataFactory = function($http) 
{ 
    var factory = {}; 




    factory.getAllItems = function() 
    { 
     return $http.get("http://localhost:8080/GetAllItems") 
    } 

    factory.DeleteItem = function(Product) 
    { 

     $http.post("http://localhost:8080/DeleteItem",{"Model":Product.MODEL_NUMBER}).success(function(data){ 
      return data; 
     }).error(function(err) 
       { 
      return err; 
     }) 
    } 

    factory.UpdateItem = function(Product) 
    { 

     $http.post("http://localhost:8080/UpdateItem",{"Model":Product.MODEL_NUMBER,"Name":Product.NAME,"MSRP":Product.MSRP,"Quantity":Product.QUANTITY}).success(function(Data){ 
      return Data; 
     }).error(function(err){ 
      return err; 
     }) 
    } 
    return factory 
} 
DataFactory.$inject=['$http'] 
angular.module('SplitWise').factory("DataFactory",DataFactory) 

}（））

Answer 1

$http.postが非同期であるので、 UpdateItem関数はサーバから受信する前にDataを返します。したがって、undefindedです。あなたがしたいことは、それがうまく割り当てられるまで待ってから、それを使って何かをすることです。 DataFactory` `ため

$scope.UpdateItem = function (data) { 
    console.log(data); 
    DataFactory.UpdateItem(data).then(function(resp) { 

     if (parseInt(resp.data) != 0) { 

      $modalInstance.dismiss('Close'); 
     } else { 
      console.log(resp); 
     } 
    }, function(err) { 
     console.log(err); 
    }); 
}