Сохранение новых моделей с использованием ресурсов AngularJS и $

Я пытаюсь понять AngularJS с использованием $resource, однако большинство примеров, которые я вижу там, не объясняют, как на самом деле создавать новые экземпляры чего-либо с помощью $resource (или как должна выглядеть вся установка), Я разместил свой код внизу.

У меня есть следующая настройка, где размещение в /entry/api должно создать новую запись. Объект записи сам имеет три свойства: имя, описание и идентификатор.

Я думал, что вызов $ Scope.save(); будет делать две вещи:

  • Сопоставьте поля ввода как данные POST
  • сделать запрос POST на url, определенный в ресурсе $(в данном случае '/entry/api')

Некоторые примеры, которые я видел, вручную сопоставляют данные с ресурсом как таковым:

var entry = new Entry();
entry.name = $name; // defined in entryController
entry.description = $scope.description; // <-- defined in entryController
entry.$save()

Я думал, что это не должно быть необходимым, так как эти поля определены в html. Это решение приводит к:

  • Определение модели в бэкэнд
  • Определение модели в интерфейсе (entryController div)
  • Добавление значений из элемента entryController div в JS-версию модели и затем, наконец, ее сохранение.

Это может быть способ работы AngularJS, однако я думал, что поля ввода в html будут автоматически отображены.

В противном случае у вас есть как минимум 3 места в обновляемом коде, если вы добавите или удалите свойство вашей (бэкэнд) модели.

Как вы можете использовать AngularJS вместе с $resource для сохранения новых объектов?

angular.module('entryManager', ['ngResource']);

function pollController($scope, $resource) {
    $scope.polls = $resource('/entry/api/:id', {id: '@id'});

    $scope.saveEntry = function() {
        this.save();
    }
}


<html ng-app="entryManager">
... <-- include angularjs, resource etc.

<div ng-controller="entryController">
    <input type='text' ng-model="name"><br/>
    <textarea ng-model="description" required></textarea><br/>
    <button class="btn btn-primary" ng-click="saveEntry()">Save</button>
</div>

Ответы

Ответ 1

Первое, что вы должны отметить, что scope != model, но область может содержать модель (ы).

У вас должен быть какой-то объект в вашей области действия, а затем сохранить его.

Итак, будет что-то вроде следующего:

HTML:

<div ng-controller="entryController">
    <input type='text' ng-model="poll.name"><br/>
    <textarea ng-model="poll.description" required></textarea><br/>
    <button class="btn btn-primary" ng-click="saveEntry()">Save</button>
</div>

JavaScript:

function pollController($scope, $resource) {
    var polls = $resource('/entry/api/:id', {id: '@id'});

    $scope.saveEntry = function() {
        polls.save($scope.poll);
    }
}

Примечание1:, даже если у вас нет инициализированного объекта опроса, AngularJS автоматически создаст новый объект при вводе текста.

Примечание2: лучше всего добавить свою форму в ngForm (добавив атрибут ng-form="someformname" в div с ng-контроллером или обернуть с помощью <form name='...'>..</form>). В этом случае вы можете проверить правильность форма $scope.someformname.$valid перед сохранением.

Хороший пример находится на главной странице веб-сайта AngularJS в разделе "Проводка бэкэнд" (кстати, мой любимый).

Ответ 2

Не используйте метод сохранения поверх самого объекта модели, используйте метод сохранения класса модели, например -

//inject User resource here
$scope.user = new User();

$scope.user.name = "etc";

User.save($scope.user,function(response){

});

ранее я использовал $scope.user.$save(function(response){}), он очищал мой объект $scope.user