У меня есть базовый API для получения/отправки прямо сейчас с AngularJS и Express/Node. Я пытаюсь создать SPA с угловым, где я могу добавлять, получать и удалять доски (в основном, как пост-заметки для Интернета). Каждый раз, когда нажимается кнопка, она запускает $scope.addBoard, объект $resource, который отправляет запрос POST.
Он срабатывает нормально, но возвращает пустой объект, который автоматически обновляет HTML только пустыми данными. Если я хочу, чтобы доска была заполнена информацией, я должен вручную обновить всю страницу. Я попытался включить обратный вызов и использовать обещание, но не могу заставить работать ни один из вариантов. Есть ли способ заставить HTML автоматически обновляться с полными данными после того, как запрос POST сделан угловым?
services.js
krelloApp.factory('Boards', ['$resource', function($resource) {
return $resource('api/boards/:id', {}, {
get: {method: 'GET', isArray: true},
add: {method: 'POST', transformResponse: []}
});
}]);
контроллер.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>
У меня тоже есть картинка ниже. Каждая доска автоматически генерирует «заголовок» «дополнительной доски», который должен отображаться при ее создании. Единственная проблема в том, что заголовок/данные отображаются только после того, как я вручную обновлю всю страницу. Когда я нажимаю зеленую кнопку, чтобы добавить доску, она дает мне только пустую доску.
Изображение 2: Действительно странно, потому что на самом деле показывает, что ответ содержит данные, но Angular по какой-то причине не заполняет их.
Окончательное редактирование (ответ):
Спасибо за помощь, ребята! Для тех, у кого такая же проблема, вот что я изменил, чтобы исправить это:
В services.js удалите transformResponse, чтобы он выглядел как add:{method: 'POST'}.
В маршруте API POST измените нижнюю строку, где написано res.json(req.user.boards), на res.json(newBoard);
.then
используйтеresponse.data
, а не толькоresponse
. - person Claies   schedule 16.01.2016transformResponse : []
в вашем сообщении. Это отключит поведение по умолчанию при анализе ответа в объект JSON, который вы пытаетесь использовать. Что произойдет, если вы удалите этот параметр? - person Claies   schedule 16.01.2016$resource
в массив?$scope.boards=[]; $scope.boards.push(Boards.get());
- person georgeawg   schedule 16.01.2016