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

Question

我有一個在Mongo數據庫上執行CRUD操作的應用程序。 我有一個表單輸入，並希望在添加時實時列出表單下方的元素。 到目前為止，這些元素僅出現在頁面刷新上。 但是，我有一個“ x”調用ng-click來刪除該項目（然后從數據庫中刪除該項目），這些項目將立即從DOM中消失（無需刷新頁面）。 我正在以相同的方式執行POST和DELETE請求，對兩者都使用了promise。 我不知道為什么刪除請求會自動更新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中的更新，我試圖將$scope.places表達式包裝在$timeout但無濟於事。

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)方法。