甚至在$ 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); 
     } 
    } 

我傳遞的更新功能來更新數據庫的項目和商店。

但在數據庫更新後的數據被在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的方式。

注：我想更新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。你想要做的是等到它被成功分配，然後用它做點什麼。

var DataFactory = function($http) { 

// ... 

factory.UpdateItem = function(Product) 
    {  
     return $http.post("http://localhost:8080/UpdateItem",{"Model":Product.MODEL_NUMBER,"Name":Product.NAME,"MSRP":Product.MSRP,"Quantity":Product.QUANTITY}); 
    } 

// ... 

} 

然後用UpdateItem功能如下：

$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); 
    }); 
}