Javascript 角度副本无法使客户端保持最新

我正在用创建一个简单的添加帖子和评论应用程序。完成本节后，我应该能够添加帖子或评论，并将其保存到数据库中，同时在客户端绑定，以保持信息的最新性。但是，它只是正确地发布到后端，并没有用ng模型数据填充post或comments数组。我相信问题可能在于邮政服务中的角度副本，但没有发现错误。我在代码和教程中看到的唯一区别是，它希望使用.success来回调$http，我认为这是不推荐的，所以我使用了.then。下面我将发布服务、控件和ng模板，如果您想了解更多信息，我可以向存储库发送链接

编辑：我还应该注意，我知道它在后端工作，因为我可以在收藏中看到它，或者我也可以手动刷新浏览器，新帖子就在那里。但很明显我不需要做刷新

服务

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;

}])

控制器

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> 

---

在你的控制器里试试这个

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

你也可以试试这个吗请先试试这个：

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

o、 getAll=函数{ 返回$http.get'/posts'。然后返回FunctionData{ angular.copydata.data，o.posts； }; };

上述内容不起作用，因为您没有从then语句返回任何内容

o、 getAll=函数{ 返回$http.get'/posts'。然后返回FunctionData{ 返回angular.copydata.data，o.posts； }; };

应该会让你更靠近

请记住，无论何时处于异步状态，您都需要在控制器/服务/指令/任何内容中正确处理它

附带的问题是，为什么仍然使用$scope而不是控制器实例呢？这种模式长期以来一直不受欢迎。角度的版本

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
  });
};

---

在o.CreateinPosts服务中，是否返回从服务器创建的帖子？现在，您只需在此处向o数组添加返回值：return$http.post'/posts'，post.thenfunctiondata{如果它不起作用，请告诉我，我将向您展示另一个解决方案。忘记第一个选项，因为您也会返回一个承诺。如果它起作用，请投票支持！感谢Sphinkx117，在尝试其他解决方案之前，我确实尝试了您发布的两个解决方案，但不幸的是，它没有修复它。这让我感到惊讶，因为我不确定为什么$scope.posts=posts.getAll不能解决这个问题。谢谢你的帖子。我希望这是一个解决方案，因为它偏离了我正在学习的教程，但它没有反映出变化。乔治的解决方案不是一个问题，但我想我会回答说，我在angular方面没有花太多时间，但我熟悉controllerAs。本教程没有使用它，我不想编写一些不同的代码，也不想跟上教程的进度，因为我的主要目标是学习如何将JWTToken与angular一起使用。