У меня есть многоступенчатая форма для нескольких представлений, которые совместно используют контроллер. Вот маршруты:
.state('tab.newEventCategory', {
url: '/activities/new-event-category',
views: {
'tab-patient': {
templateUrl: 'templates/new-event-category.html',
controller: 'ActivityDashboardCtrl'
}
}
})
.state('tab.newEventSubCategory', {
url: '/activities/new-event-sub-category',
views: {
'tab-patient': {
templateUrl: 'templates/new-event-sub-category.html',
controller: 'ActivityDashboardCtrl'
}
}
})
.state('tab.selectEventAttendees', {
url: '/activities/select-event-attendees',
views: {
'tab-patient': {
templateUrl: 'templates/select-event-attendees.html',
controller: 'ActivityDashboardCtrl'
}
}
})
.state('tab.addPictures', {
url: '/activities/add-pictures',
views: {
'tab-patient': {
templateUrl: 'templates/add-pictures.html',
controller: 'ActivityDashboardCtrl'
}
}
})
Я пытаюсь сделать так, чтобы когда пользователь проходит через форму, его ответы сохранялись в переменной с именем formData
. Вот контроллер:
.controller('ActivityDashboardCtrl', function($scope, $state, EventCategory, EventForm, EventSubCategory, Patient, $cordovaImagePicker, $ionicPlatform, CreateEvent) {
$scope.formData = CreateEvent;
$scope.event_categories = EventCategory.query();
$scope.event_sub_categories = EventSubCategory.query();
$scope.patients = Patient.query({facility_user_id: 1});
$scope.moveToEventSubCategory = function(event_category){
$scope.formData.category = event_category;
$state.go('tab.newEventSubCategory');
}
$scope.createSubCategory = function(sub_categories){
$state.go('tab.selectEventAttendees');
}
$scope.addAttendeesToFormData = function(event_attendees){
$state.go('tab.addPictures');
}
$scope.saveForm = function(){
$scope.formData.$save();
}
});
Я новичок в Angular, и мне несколько сложно понять, как работают сервисы.
Как вы можете видеть в приведенном выше коде, в первой части формы $scope.formData устанавливается на службу CreateEvent:
.factory('CreateEvent', function($resource){
return $resource("http://localhost:3000/api/events");
})
Вот первая страница формы. Когда эта часть отправляется, вызывается функция moveToEventSubCategory
:
<ion-view view-title="Activity Dashboard">
<ion-content>
<div ng-repeat="event_category in event_categories" class="padding">
<a class="button button-block button-positive button-large" ng-click="moveToEventSubCategory(event_category)">
{{event_category}}
</a>
</div>
</ion-content>
</ion-view>
Это успешная передача информации на следующую страницу формы, поскольку выражения на этой странице правильно оцениваются с помощью formData. На второй странице пользователь выбирает подкатегории:
<!-- client/app/views/main.html -->
<ion-view view-title="New Event Subcategory">
<ion-content class="padding">
formData Category:
{{formData.category}}
<form ng-submit="createSubCategory(formData)">
<div ng-repeat="sub_category in event_sub_categories">
<ion-checkbox ng-model="formData.subcategories[sub_category]" ng-true-value="'{{sub_category}}'">
{{sub_category}}</ion-checkbox>
</div>
<button type="submit" class="button button-block button-positive">Continue</button>
</form>
</ion-content>
</ion-view>
На последней странице я хочу отправить информацию на сервер, поэтому у меня есть:
<button class="button button-full button-positive" ng-click="saveForm()">
Submit
</button>
При нажатии на кнопку я получаю следующую ошибку в консоли браузера:
ionic.bundle.js:25642 TypeError: $scope.formData.$save is not a function
at Scope.$scope.saveForm (controllers.js:54)
at fn (eval at <anonymous> (ionic.bundle.js:26457), <anonymous>:4:215)
at ionic.bundle.js:62386
at Scope.$eval (ionic.bundle.js:29158)
at Scope.$apply (ionic.bundle.js:29257)
at HTMLButtonElement.<anonymous> (ionic.bundle.js:62385)
at HTMLButtonElement.eventHandler (ionic.bundle.js:16583)
at triggerMouseEvent (ionic.bundle.js:2948)
at tapClick (ionic.bundle.js:2937)
at HTMLDocument.tapMouseUp (ionic.bundle.js:3013)(anonymous function) @ ionic.bundle.js:25642(anonymous function) @ ionic.bundle.js:22421Scope.$apply @ ionic.bundle.js:29259(anonymous function) @ ionic.bundle.js:62385eventHandler @ ionic.bundle.js:16583triggerMouseEvent @ ionic.bundle.js:2948tapClick @ ionic.bundle.js:2937tapMouseUp @ ionic.bundle.js:3013
Может ли кто-нибудь дать мне хорошее объяснение того, как службы работают для передачи информации между представлениями, а также, в частности, как исправить ошибку, которую я получаю?
ОБНОВИТЬ:
Основываясь на некоторых отзывах, я переписал сервис следующим образом:
.factory('CreateEvent', function($resource){
// var eventFormData = eventFormData || {};
// return $resource("http://localhost:3000/api/events");
var formData = {};
return {
getFormData:function(){
return formData;
},
setCategory:function(category){
formData.category = category;
},
setSubCategories:function(sub_categories){
formData.sub_categories = sub_categories;
},
createEvent:function(){
return $resource("http://localhost:3000/api/events");
}
}
})
Затем, чтобы сохранить объект с помощью вызова API, я делаю $scope.formData.createEvent().$save();
, но все равно получаю ту же ошибку.