Question

我对Angular比较新。我正在尝试使用此博客应用程序的评论表单发布评论，而不仅仅是将它们保存在Javascript中，而是通过API POST发送到我的数据库并将其存储在那里。我能够获取评论以及其他博客文章信息，但无论出于何种原因我都无法发帖。

BlogService.js

angular.module('BlogService', [])
  .factory('BlogService', ['$http', function($http) {

    return {
        // Call to GET Blog API
        get : function() {
            return $http.get('/api/blog');
        },
        // Call to GET Blog API via ID
        show : function() {
            return $http.get('/api/blog/' + id);
        },
        // Call to POST new data using Blog API
        create : function(blogData) {
            return $http.post('/api/blog', $scope.formData);
        },
        // Call to POST Comments in Blog API
        createComment : function(commentData) {
          return $http ({
            method: 'POST',
            url: '/api/blog/' + id + '/comments',
           header: { 'content-type' : 'application/x-www-form-urlencode},
            data: $.param(commentData)
          });
        },

        // Call to PUT to update data using Blog API
        update : function(id) {
           return $http.put('/api/blog' + id);
        },

        // Call to DELETE data using Blog API
        delete : function(id) {
            return $http.delete('/api/blog/' + id);
        }
    }

}]);

CommentCtrl

要注意，此CommentCtrl是较大的BlogCtrl.js的一部分。我把它分成了自己的控制器。如果它有帮助，我可以发布整个文件。

...

.controller('CommentCtrl', ['$scope', '$http', 'BlogService', function($scope, $http, BlogService) {
  this.commentData = {};

  this.addComment = function(post) {
    BlogService.createComment(this.commentData)
      .success(function(data) {
        this.commentData = {};
        this.commentData.createdOn = Date.now();
        post.comments.push(this.commentData);
        this.commentData = {};
    })
    .error(function(data) {
      console.log('Error: ' + data);
    });
  };

}]);

blog.html 表单是我尝试POST的部分。这只是降价的一小部分。如果您想查看整个html文件，请告诉我。

  <div class="post" ng-repeat="post in blog.posts" ng-show="blog.isSelected($index)">
    <div>
      <h2>{{post.title}}</h2>
      <img ng-src="{{post.image}}" ng-show="{{post.image}}"/>
      <cite>by {{post.author}} on {{ post.createdOn | date:'medium' }}</cite>
      <div class="post-body">
        <p>{{post.body}}</p>
      </div>
      <div ng-controller="CommentCtrl as CmtCtrl">
        <button class="icon-button" ng-click="post.likes = post.likes+1">
          <i class="fa fa-thumbs-up"></i> {{post.likes}}
        </button>
        <button class="icon-button" ng-click="post.dislikes = post.dislikes+1">
          <i class="fa fa-thumbs-down"></i> {{post.dislikes}}
        </button>
        <h3> Comments <h3>
        <form class="form-style" name="commentForm" ng-submit="commentForm.$valid && CmtCtrl.addComment(post)" novalidate>
          <h4> Add Comment: </h4>
          <div>
            <input type="text" class="comment-form form-control input-lg" name="body" ng-model="commentData.body" required placeholder="Please Leave Your Comment Here!"/>
          </div>
          <h4> Name: </h4>
          <div>
            <input type="text" class="comment-form form-control input-sm" name="author" ng-model="commentData.author" required placeholder="Name"/>
          </div>
          <div>
            <button type="submit" class="btn comment-button button-style intro-social-buttons">Submit</button>
          </div>
          <!--<textarea class="comment-form" ng-model="CmtCtrl.comment.body" cols="30" rows="6" required></textarea></br>
          <label for=""> <h4>Name:</h4> </label></br>
          <input class="comment-form" type="text" ng-model="CmtCtrl.comment.author" required placeholder="Name"/></br>
          <input class="btn comment-button button-style intro-social-buttons" type="submit" value="Submit"></br>-->
        </form>
        <ul>
          <li ng-repeat="comment in post.comments">
            "{{comment.body}}"
            <cite>- <b>{{comment.author}}</b></cite>
          </li>
        </ul>
      </div>
    </div>
  </div>

另外，要注意我使用的是Mongoose，我的架构允许使用正文，作者和日期。我在我的博客数据库中创建了一个嵌套数组，因为我希望将它附加到个人博客文章中。

如果还有什么我可以回答或提供任何其他文件，请告诉我。

由于

无法获得评论表格到POST - Angular App

0 个答案: