DOM沒有在$ http上更新帶有MEAN堆棧的POST請求

Question

我有一個在Mongo數據庫上執行CRUD操作的應用程序。我有一個表單輸入，並希望在添加表單時實時列出表單中的元素。截至目前，這些元素僅出現在頁面刷新上。但是，我有一個「x」，它調用ng-click來刪除項目（並隨後從數據庫中刪除項目），這些項目將立即從DOM中消失（不刷新頁面）。我以相同的方式執行POST和DELETE請求，使用兩者的承諾。我無法弄清楚爲什麼刪除請求會自動更新DOM，但發佈請求不會。

這裏是我的控制器：

app.controller('ListController', function($scope, PlaceService) { 

    $scope.places = []; 

    getPlaces(); 
    function getPlaces() { 
     PlaceService.findAll().then(function(promise) { 
      // $scope.places updates correctly, but DOM doesn't show it 
      $scope.places = promise.data 
     }); 
    }; 

    $scope.submit = function(place) { 
     if (!place) return alert('No content submitted'); 
     PlaceService.submit(place).then(function(data) { 
      getPlaces(); 
     }, function(error) { 
      console.log(error) 
     } 
    }; 

    $scope.remove = function(id) { 
     PlaceService.remove(id).then(function(data) { 
      getPlaces(); 
     }, function(error) { 
      console.log(error) 
     } 
    } 

}); 

PlaceService是一個工廠，與API通信，如下：

app.factory('PlaceService', function($http, $q) { 

    return { 

     findAll: function() { 
      var deferred = $q.defer(); 
      $http.get('/places').then(function(response) { 
       console.log('Get Request Successful'); 
       return deferred.resolve(response); 
      }, function(err) { 
       return console.log(err); 
      }); 
      return deferred.promise; 
     }, 
     remove: function(id) { 
      var deferred = $q.defer(); 
      $http.delete('/places/' + id).then(function(response) { 
       console.log('Delete Successful'); 
       return deferred.resolve(response); 
      }, function(err) { 
       return console.log(err); 
      }); 
      return deferred.promise; 
     }, 
     submit: function(entry) { 
      var deferred = $q.defer(); 
      var jObj = JSON.stringify(entry); 
      $http.post('/places', jObj).then(function(response) { 
       console.log('Post Successful'); 
       return deferred.resolve(response); 
      }, function(err) { 
       return console.log(err); 
      }); 
      return deferred.promise; 
     } 

    } 
}); 

我試圖讓$scope.places以反映更新DOM，我試過在$timeout中打包$scope.places表達式，但無濟於事。

TLDR：$scope.places沒有反映在控制器

Answer 1

你要使用.then()在$scope.submit和$scope.remove功能，以確保您的getPlaces()功能只在一次運行後或DELETE完成所做的更改。

Answer 2

PlaceService.submit(place)是一個$q的承諾。這意味着，如果你要調用getPlaces();一次「地方」已經成功提交，你應該把它放在你的回調：

PlaceService.submit(place) 
    .then(function(data) { 
     getPlaces(); 
    }, function(error) { 
    // handle your error 
    }); 

你也將要處理你PlaceService.remove(place)方法相同的方式。