javascript - Angular 副本无法让客户端保持最新状态

Question

我正在使用 https://thinkster.io/tutorials/mean-stack/wiring-everything-up 创建一个简单的添加帖子和评论应用程序。完成本节后，我应该能够添加帖子或评论，并将其保存到数据库并同时绑定(bind)在客户端以保持信息最新。然而，它只是正确地发布到后端，并且没有使用 ng-model 数据填充帖子或评论数组。我相信问题可能出在邮政服务中的 Angular 副本，但没有看到错误。我在代码和教程中看到的唯一区别是它想使用 .success 来回调 $http，我认为它已被弃用，所以我使用 .then 代替。下面我将发布服务、控件和 ng-template，如果您想了解更多信息，我可以发送存储库的链接。

编辑:另外我应该注意，我知道它正在后端工作，因为我可以在集合中看到它，或者我也可以手动刷新浏览器，新帖子就在那里。但显然我不需要刷新。

服务

app.factory('posts', ['$http', function($http){
var o = {
    posts:[]
}

o.get = function(id){
    return $http.get('/posts/' + id).then(function(res){
        return res.data;
    });    
};

o.getAll = function() {
    return $http.get('/posts').then(function(data){
        angular.copy(data.data, o.posts);
    });
  };

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

o.upvote = function(post){
    return $http.put('/posts/'+ post._id + '/upvote').then(function(data){
        post.upvotes +=1;
    });
}

o.addComment = function(id, comment){
    return $http.post('/posts/' + id + '/comments', comment);
};

o.upvoteComment = function(post, comment){
    return $http.put('/posts/' + post._id + '/comments/' + comment._id + '/upvote')
        .then(function(data){
            comment.upvotes += 1;
        });
};

return o;

}])

Controller

app.controller('MainCtrl', ['$scope', 'posts', function($scope, posts){
$scope.test = 'Hello world!';

$scope.posts = posts.posts;

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

$scope.incrementUpvotes = function(post) {
  posts.upvote(post)
};

}]);

ng-模板

<script type='text/ng-template' id='/home.html'>
   <div class='page-header'>
             <h1>Rawle News App</h1>
          </div><!--End of page-header-->

          <div ng-repeat='post in posts | orderBy: "-upvotes"'>
            <span class="glyphicon glyphicon-thumbs-up"
              ng-click="incrementUpvotes(post)"></span>
            {{post.upvotes}}
            <span class='link-titles'>
              <a ng-show="post.link" href="{{post.link}}">
                {{post.title}}
              </a>
              <span ng-hide="post.link">
                {{post.title}}
              </span>
              <span>
                <a href="#!/posts/{{post._id}}">Comments</a>
              </span>
            </span>
          </div>  

          <form class='post-form' ng-submit='addPost()'>
              <div class='form-group'>
                 <input type='text' placeholder='title' ng-model='title'></input> 
              </div><!--End of form-group-->
              <div class='form-group'>
                 <input type='text' placeholder='link' ng-model='link'></input> 
              </div><!--End of form-group-->
            <button class='btn btn-primary' type='submit'>Post</button>
          </form> 
</script> 

Answer 1

post.create 函数是错误的:

//ERRONEOUS
/*
o.create = function(post) {
  return $http.post('/posts', post).then(function(data){
    o.posts.push(data);
  });
};
*/

//PUSH response.data
o.create = function(post) {
  return $http.post('/posts', post).then(function(response){
    o.posts.push(response.data);
    //return value for chaining
    return response.data
  });
};