在 angular-fullstack 应用程序中更新后单个帖子不同步

Posted 2023-03-11

【中文标题】在 angular-fullstack 应用程序中更新后单个帖子不同步

【英文标题】：Single post not synching after updating in angular-fullstack app

【发布时间】：2015-04-07 12:32:41

【问题描述】：

在我的 Angular-fullstack 应用程序中，可以在我的帖子概览页面上发布帖子。问题是：当我在单个帖子页面上发表评论（将其推送到帖子并更新）时，我的套接字更新不起作用。

我的架构：

var PostSchema = new Schema(
  date:  type: Date, default: Date.now ,
  title: String,
  body: String,
  comments: [ name: String, body: String, date:  type: Date, default: Date.now  ],
  active: Boolean
);

posts.controller（就像一个魅力）

.controller('PostsCtrl', function ($scope, $http, socket) 
  $http.get('/api/posts').success(function(posts) 
    $scope.posts = posts;
    socket.syncUpdates('post', $scope.posts, function(event, post, posts) 
    );
  );

  $scope.addPost = function()
      $http.post('/api/posts',  title: $scope.title, body: $scope.body, link: $scope.link );
      $scope.title = '';
      $scope.body = '';
      $scope.link = '';
  ;
);

post.controller，当我发表评论时不更新：

.controller('PostCtrl', function ($scope, $http, socket, $stateParams) 

  $http.get('/api/posts/' + $stateParams.id).success(function(post) 
    $scope.post = post;

    socket.syncUpdates('post', $scope.post);
  );

  $scope.$on('$destroy', function () 
    socket.unsyncUpdates('post');
  );

  $scope.addComment = function()
      $http.post('/api/posts/' + $stateParams.id + '/comments',  name: "NAAM", body: "BODY" );
  ;

);

评论被保存到数据库中，但需要刷新才能更新 ng-repeat。谁能帮帮我？

【参考方案1】：

您没有更新您的视图。试试这个

.controller('PostCtrl', function($scope, $http, socket, $stateParams) 

    // Update the view (put this in a function, so you could call it again when needed)
    function updateView()
        $http.get('/api/posts/' + $stateParams.id).success(function(post) 
            $scope.post = post;

            socket.syncUpdates('post', $scope.post);
        );            
    
    // Then call it, first time 
    updateView();

    $scope.addComment = function() 
        $http.post('/api/posts/' + $stateParams.id + '/comments', 
            name: "NAAM",
            body: "BODY"
        );

        // And then each time you post a comment
        updateView();
    ;

);

---

或者，直接更新视图。我不确定你的 $scope.post 应该包含什么，但如果它是一个数组，并且新数据是 name: "NAAM", body: "BODY" 你可以推送它

.controller('PostCtrl', function($scope, $http, socket, $stateParams) 

    $scope.addComment = function() 
        $http.post('/api/posts/' + $stateParams.id + '/comments', 
            name: "NAAM",
            body: "BODY"
        );

        // update your view
        $scope.post.push( name: "NAAM", body: "BODY" );
    ;

);

您也可以选择直接更新视图而不从服务器获取。我不确定您的$scope.post 是什么以及您的socket.syncUpdates 如何实际更新您的视图，但如果您能够直接做到这一点，那么您确实将通过直接更新来使用“双向绑定” $scope

【讨论】：

这似乎有效。但在我看来，这不是双向绑定，对吧？在我的帖子控制器中，帖子被即时获取，而我没有将 $http 请求包装在一个函数中。

Angular 中的术语“双向绑定”适用于 DOM $scope，它不包括服务器。您的 $scope.post 依赖于从服务器获取 ($http.get) 数据。