使用 $http (REST) 從表單發布數據

Question

我正在嘗試使用 Angular 進行 CRUD 操作，但是我在向服務器發送 POST 請求時遇到了一些問題。

這是我的控制器：

angular.module('myModule').controller("ListingCtrl", function($scope, posts) {

    $scope.addProject = function () {
        if (!$scope.title || $scope.title === '') {
            return;
        }
        posts.create({
            title: $scope.title,
            short_description: $scope.short_description
        });
        $scope.title = '';
        $scope.short_description = '';
    };

});

這是我的服務：

angular.module('myModule', [])
.factory('posts', [
    '$http',
    function($http){
    var o = {
        posts: []
    };
    return o;
}]);

o.create = function(post) {
    return $http.post('linktomyliveAPI', post).success(function(data){
        o.posts.push(data);
    });
};

最后，這是視圖：

<div ng-controller="ListingCtrl">

<form ng-submit="addProject()">
    <input type="text" ng-model="title"></input>
    <input type="text" ng-model="short_description"></input>
    <button type="submit">Post</button>
</form>

我已經能夠成功發出 GET 請求，但由於某種原因，我無法弄清楚 POST。

如果重要的話，我的 API 是使用 Django Rest Framework 構建的。

謝謝！

Answer 1

我認為您添加create方法的方式不正確，您必須在工廠對象上添加該方法

將 create 方法放在從工廠返回的對象上。

為您服務

angular.module('myModule', [])
  .factory('posts', ['$http',function($http){
      var create = function(post) {
          return $http.post('linktomyliveAPI', post).success(function(data){
            o.posts.push(data);
          });
      };

      var o = {
         posts: [],

         // expose create method on factory object
         create: create
      };

      return o;
}]);

希望這些能解決你的問題。

Answer 2

修復。

我必須更改一些服務器端設置才能使其正常工作。