Использование Restangular и попытка установить несколько параметров в var из $scope

Я изучаю Angularjs и использую Restangular для подключения к API сервера Rails. Кажется, мне не хватает базового понимания того, как назначать параметры из формы в переменную, которую я буду использовать в своей функции для публикации в моем API-интерфейсе rails.

Вот мой контроллер (или соответствующая часть):

.controller('NewCtrl', ["$scope", "Restangular", function($scope, Restangular) {

  var passages = Restangular.all('passages');
  var allPassages = passages.getList();

  var newPassage = {
    book: $scope.passages.book
  }; 

  $scope.add = function() {
    passages.post(newPassage);
  };

Вот моя форма:

<h1>Add New Passage</h1>
<form name="myForm" ng-submit="add()" ng-controller="NewCtrl" class="my-form">
  Book: <input name="passages.book" required><span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
  <input type="submit" id="submit" value="Submit" />
</form>

В консоли javascript я получаю следующую ошибку:

TypeError: Cannot read property 'book' of undefined
at new <anonymous> (http://localhost:9000/scripts/controllers/main.js:38:27)
at invoke (http://localhost:9000/bower_components/angular/angular.js:3000:28)
at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:3012:23)
at http://localhost:9000/bower_components/angular/angular.js:4981:24
at update (http://localhost:9000/bower_components/angular/angular.js:14509:26)
at Object.Scope.$broadcast (http://localhost:9000/bower_components/angular/angular.js:8468:28)
at http://localhost:9000/bower_components/angular/angular.js:7614:26
at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:6995:59)
at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:6995:59)
at http://localhost:9000/bower_components/angular/angular.js:7032:26

Я думаю, что мне что-то не хватает в том, как я могу присвоить значения из моей формы с помощью $scope значению в моем var. Когда я присваиваю буквальное значение say: book: "Ефесянам", все работает нормально. Спасибо за помощь с этим вопросом.


ruby-on-rails javascript angularjs restangular
person acoustic_north    schedule 20.08.2014    source источник
comment
Вам нужно использовать директиву ng-model для вашего элемента ввода: 'ng-model=passages.book'.   -  person apairet    schedule 20.08.2014
comment
ХОРОШО. Это хороший улов. Я добавил ng-model=passages.book во входной тег, но все равно получаю ту же ошибку.   -  person acoustic_north    schedule 20.08.2014

Ответы (1)


arrow_upward
1
arrow_downward

Вот как исправить ваш контроллер:

.controller('NewCtrl', ["$scope", "Restangular", function($scope, Restangular) {

    var passages = Restangular.all('passages');
    var allPassages = passages.getList();

    // Initialise $scope.passage:
    $scope.passages = {
        book: null
    };

    $scope.add = function() {
        passages.post({
            book: $scope.passages.book
        });
    };
}])

и разметка:

<h1>Add New Passage</h1>
<form name="myForm" ng-submit="add()" ng-controller="NewCtrl" class="my-form">
  Book: <input ng-model="passages.book" name="passages.book" required><span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
  <input type="submit" id="submit" value="Submit" />
</form>
person apairet    schedule 20.08.2014
comment
Спасибо. Я пробовал это, но оказалось, что ценность книги равна нулю. Вот вывод с сервера Rails: Запущен POST /passages.json для 127.0.0.1 в 2014-08-21 10:23:11 -0400 Обработка PassagesController#create as JSON Параметры: {book=›nil, pass=› {book=›nil}} Не удается проверить подлинность токена CSRF (0,2 мс) начать транзакцию SQL (1,5 мс) ВСТАВИТЬ В проходы (created_at, updated_at) ЗНАЧЕНИЯ (?, ?) [[created_at, 2014-08-21 14: 23:11.748020], [updated_at, 21.08.2014 14:23:11.748020]] (0,6 мс) фиксация транзакции Отрендеренные проходы/show.json.jbuilder - person acoustic_north; 21.08.2014
comment
это сработало! Потребовалось одно небольшое изменение в вашем коде. Просто нужно было закрыть контроллер с помощью }]); вместо }) Спасибо за помощь. - person acoustic_north; 22.08.2014