AngularJS $resource returns 空对象，不更新数据

Question

我现在有一个基本的 get/post api AngularJS 和 Express/Node。我正在尝试使用 angular 创建一个 SPA，我可以在其中添加、获取和删除板（基本上类似于 post-it 网络笔记）。每次单击按钮时，它都会触发 $scope.addBoard，这是一个发出 POST 请求的 $resource 对象。

它可以正常触发，但它 returns 是一个空对象，仅使用空数据自动更新 HTML。如果我想让看板充满信息，我必须手动刷新整个页面。我尝试合并回调并使用承诺，但我无法使用任何一个选项。在 POST 请求以 angular 方式发出后，有没有办法让 HTML 自动更新完整数据？？

services.js

  krelloApp.factory('Boards', ['$resource', function($resource) {

  return $resource('api/boards/:id', {}, {
    get: {method: 'GET', isArray: true},
    add: {method: 'POST', transformResponse: []}
  });

}]);

controller.js

krelloApp.controller('boardController', ['$scope', '$resource', '$location', '$http', 'Boards',
function($scope, $resource, $location, $http, Boards) {

  // Get all boards
  $scope.boards = Boards.get();

  // Add board
  $scope.addBoard = function() {
    // Boards.add().then(function(response) {
    //   $scope.boards.push(response);
    // })
    // Boards.add(function(response) {
    //   $scope.boards.push(response)
    // });
    $scope.boards.push(Boards.add());
  };

}]);

API 路线 POST:

  app.post('/api/boards', isLoggedIn, function(req, res) {
    // Add new board to user
    // May need more posts to add lists and stuff
    User.findOne({ _id: req.user._id }, function(err, user) {
      if (err) {
        return res.send(err);
      };
      newBoard = user.generateBoard('Extra Board');
      newList = user.generateList('Extra List');
      newCard = user.generateCard('Extra Card', 'Card Description');
      newList.cards.push(newCard);
      newBoard.lists.push(newList);
      user.boards.push(newBoard);

      user.save(function(err) {
        if (err) {
          throw err;
        };
      });

      console.log('Success POST');
      console.log('Added Board to user: ' + req.user.local.email);
      res.json(req.user.boards)
    });
  });

html:

<div class="row">
  <div class="col-xs-12 col-md-3">
    <div class="btn btn-success" ng-click="addBoard()">
      <span class="fa fa-plus-square"></span>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-md-3" ng-repeat="board in boards">
    <h1 class="jumbotron">{{ board.title }}</h1>
  </div>
</div>

我也有一张下面的照片。每个板自动生成一个 'title' 的 'extra board'，它应该在生成时显示。唯一的问题是 title/data 仅在我手动刷新整个页面后显示。当我点击绿色按钮添加看板时，它只给我一个空的看板。

图片 2：真的很奇怪，因为它实际上显示响应包含数据，但 Angular 出于某种原因没有填充它。

最终编辑（答案）：

感谢大家的帮助。对于遇到同样问题的任何人，这就是我为修复它所做的更改：

在 services.js 中，删除 transformResponse，使其看起来像 add:{method: 'POST'}.

在 API POST 路线中，将底线 res.json(req.user.boards) 更改为 res.json(newBoard);

Answer 1

我通常在回调中使用第二个注释掉的方法。如果你这样使用它，你会得到什么？

Boards.add({}, function(response) {
  $scope.boards.push(response)
}, function(error){
  console.log(error);
});

AngularJS $resource returns 空对象，不更新数据

AngularJS $resource returns empty object and doesn't update with data

2-way-object-databinding

express

angularjs

single-page-application

angular-resource