Question

我正在开发一个博客应用，其中包含您可以选择编辑，查看或删除的帖子列表。如果您点击＆＃34;删除，＆＃34;该帖子应从帖子管理页面中删除。我可以看到在控制台中更新数据，点击＆＃34;删除＆＃34;后只有少量帖子，但页面上的帖子数量不会更新，直到刷新页面为止。我希望有人能发现我的控制器和视图之间的脱节。

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

manage.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

视图中的

postsData不是控制器中的postData。

错误代码：

控制器：

$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以外获取数据（此处不适用），那么您需要＆＃34;申请＆＃34;范围，以便视图更新。要执行此操作，您需要运行$scope.$apply() - 尽管这通常会导致更多问题然后修复。大多数时候，有一些方法可以在Angular中做同样的事情（使用angular＆＃39; s $http而不是JQuery - 正如你已经在做的那样，等等）

Answer 2

$ http遗留承诺方法成功与错误已被弃用。请改用标准方法。如果$ httpProvider.useLegacyPromiseExtensions设置为false，则这些方法将抛出$ http / legacy错误。 Angular docs for $http

这意味着，你应该写：

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

角度承诺解析将导致摘要更新，您的数据将可见。

另外，正如其他人所指出的那样，您在控制器和模板中使用了不同的变量名称。在您引用postsData的模板中，但在控制器中您已设置postData。

数据删除后角度视图未更新

server.js

controller.js

manage.jade

2 个答案: