La ressource AngularJS $ renvoie l'objet vide et ne le met pas à jour avec les données

Question

J'ai maintenant un basic get/post api avec AngularJS et Express/Node. J'essaie de faire un SPA avec angulaire où je peux ajouter, obtenir, et supprimer des planches (essentiellement comme des notes post-it pour le web). Chaque fois qu'un bouton est cliqué, il tire $ scope.addBoard, qui est un objet de ressource $ qui effectue une requête POST.

Il se déclenche bien, mais il renvoie un objet vide qui met à jour automatiquement le HTML avec des données vides uniquement. Si je veux que le tableau soit rempli d'informations, je dois faire un rafraîchissement manuel de toute la page. J'ai essayé d'incorporer un rappel et d'utiliser une promesse, mais je ne peux obtenir aucune option pour travailler. Y at-il un moyen que je peux obtenir le HTML pour mettre à jour automatiquement avec les données complètes après que la demande POST est faite de manière angulaire ??

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 Route 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> 

J'ai aussi une photo ci-dessous. Chaque forum génère automatiquement un 'titre' de 'carte supplémentaire' qui devrait apparaître quand il est généré. Le seul problème est que le titre/données ne s'affiche qu'après avoir actualisé manuellement toute la page. Quand je clique sur le bouton vert pour ajouterBoard, cela me donne seulement un tableau vide. Image 2: Vraiment étrange car il montre réellement que la réponse contient les données, mais Angular ne la remplit pas pour une raison quelconque.

Modifier final (Réponse):

Merci pour l'aide les gars. Pour tous ceux qui ont le même problème, voici ce que j'ai changé pour le corriger:

Dans services.js, supprimez transformResponse pour qu'il ressemble à {méthode: 'POST'}.

Dans la route API POST, modifiez la ligne du bas où il est dit res.json (req.user.boards) à res.json (newBoard);

Answer 1

J'utilise normalement la seconde méthode commentée avec le rappel. Si vous l'utilisez comme ça, qu'est-ce que vous obtenez?

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