javascript - 数据删除后 Angular View 不更新

Question

我正在开发一个博客应用程序，其中包含您可以选择编辑、查看或删除的帖子列表。如果您单击“删除”，该帖子应从帖子管理页面中删除。单击“删除”后，我可以看到控制台中的数据已更新，帖子数量减少了，但页面上的帖子数量只有在刷新页面后才会更新。我希望有人能够发现我的 Controller 和 View 之间的脱节。

服务器.js

router.delete('/api/posts/:post_id', function(req, res) {
    var results = [];

    // Grab data from the URL parameters
    var id = req.params.post_id;

    // Get a Postgres client from the connection pool
    pg.connect(connectionString, function(err, client, done) {
        // Handle connection errors
        if(err) {
          done();
          console.log(err);
          return res.status(500).json({ success: false, data: err});
        }

        // SQL Query > Delete Data
        client.query("DELETE FROM posts WHERE id=($1)", [id]);

        // SQL Query > Select Data
        var query = client.query("SELECT * FROM posts ORDER BY id ASC");

        // Stream results back one row at a time
        query.on('row', function(row) {
            results.push(row);
        });

        // After all data is returned, close connection and return results
        query.on('end', function() {
            done();
            return res.json(results);
        });
    });

}); 

module.exports = router;

Controller .js

// Delete post
$scope.deletePost = function(postID) {
    $http.delete('/api/posts/' + postID)
        .success(function(data) {
            $scope.postData = data;
            console.log(data);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
};

管理.jade

(这是一个部分模板，如果您也想查看layout.jade，请告诉我)

h1 Manage posts 
br
div(class="post-list")
  div(ng-repeat='post in postsData track by $index' class="post")
    h3 Title: {{ post.title }} 
    h3 Date: {{ post.published | date: 'MMM d, y'}}
    h4 Author: {{ post.author }}
    div Post: {{ post.draft }}
    div(class="edit-buttons")
      a(href="posts/{{ post.id }}")
        button(class="btn btn-default btn-lg btn-success pull-left") View post
      a(href="posts/{{ post.id }}/edit")
        button(class="btn btn-default btn-lg btn-info pull-left") Edit post
      button(class="btn btn-default  btn-lg btn-danger pull-right" ng-click="deletePost(post.id)") Delete post

对此的任何想法都非常感谢!我是 Angular 的新手，所以如果我还缺少任何最佳实践，请告诉我。

Answer 1

View 上的

postsData 不是 Controller 中的 postData。

错误代码:

Controller :

$scope.postData = data;

查看:

'post in postsData track by $index'

将 $scope.postData = data; 更改为 $scope.postsData = data;

此外，由于 .success/.error 已弃用，请将代码更改为使用 .then() 方法，如下所示:

$http.delete('/api/posts/' + postID).then(function(data) {
    //Success
    $scope.postsData = data;
    console.log(data);
}, function(data) {
    //Error
    console.log('Error: ' + data);
});

如果由于某种原因，您从 Angular 外部获取数据(此处不适用)，那么您将需要“应用”范围，以便 View 更新。为此，您需要运行 $scope.$apply() - 尽管这通常会导致更多问题，然后再修复。大多数时候，有多种方法可以在 Angular 中执行相同的操作(使用 Angular 的 $http 而不是 JQuery - 正如您已经在做的那样，等等)