DOM не обновляется по запросу $ http POST со стеком MEAN

Question

У меня есть приложение, которое выполняет операции CRUD в базе данных Mongo. У меня есть ввод формы и вы хотите перечислить элементы под формой в режиме реального времени по мере их добавления. На данный момент элементы появляются только при обновлении страницы. Однако у меня есть «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, я попытался обернуть выражение $scope.places в $timeout, но безрезультатно.

TLDR: $scope.places не отражает изменения, сделанные в контроллере

Answer 1

Вы хотите использовать .then() в ваших $scope.submit и $scope.remove функций для обеспечения того, чтобы ваша getPlaces() функция выполняется только один раз POST или DELETE завершена.

Answer 2

PlaceService.submit(place) - это $q обещание. Это означает, что если вы хотите позвонить getPlaces(); раз в «место» был успешно отправлен, вы должны поместить его в обратном вызове:

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

Вы также хотите, чтобы обработать ваш метод PlaceService.remove(place) таким же образом.