Использование Angular Service для передачи информации между представлениями с одного контроллера

Question

Использование Angular Service для передачи информации между представлениями с одного контроллера

0

У меня многоступенчатая форма по нескольким представлениям, в которых есть контроллер. Вот маршруты:

.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(); но я все равно получаю ту же ошибку.

Philip7899 18 апр. 2016, в 20:29

Источник

Теги:

ionic-framework

angularjs

ngresource

angularjs-service

angularjs-factory

2 ответа

Ещё вопросы

vbravo · Answer 1 · 2016-04-18T17-52-00.000Z

Возможно, вы получаете ошибку, потому что у CreateEvent нет функции, называемой save(). как работают службы для передачи информации между контроллерами:

отредактируйте: при выполнении большего исследования, "CreateEvent" должен иметь функцию, называемую save() по умолчанию.

angular.module('mainModule').service('someService',['$http', function($http){

     var sharedObject = {};

     this.getObject = function(){
      return sharedObject;
  };
  this.setObjectData = function(something){
      sharedObject.data = something;
  };

        // EDIT

        // $http call
        this.httpQuery = function(){
            return $http.get('api/users').then(
                function(response){
                    return response.data;
                });
        };

    // $resource call, which is somewhat the same as the one you wrote
    var resourceQuery = $resource('/users/:userId', { userId:'@userId'});
    // might be unnecessary
    this.getResource = function(){
        return resourceQuery;
    };
    // END EDIT

}]);

    // Edit: to use on controllers:

// $http
someService.httpQuery().then(
    function(data){
        // do something with data.
        console.log(response)
    });

// $resource
var someData = [1,2,3,4];
var user = someService.getResource().get({id:2});
user.$promise.then(
    function(data)
        // do something with data.
        console.log(data);
    });

// END EDIT
angular.module('mainModule').controller('controller1', [$'$scope', 'someService', function($scope, someService){
        // $scope.objectData is now bound to someService sharedObject var
        // and will be updated when sharedObject is changed (when setObjectData function is called from wherever)
        $scope.objectData = someService.getObject();
    }]);

angular.module('mainModule').controller('controller2', ['$scope', 'someService', function($scope, someService){
 var someArray = [1,2,3,4];
        // the sharedObject.data in someService is now an array [1,2,3,4]
        $scope.setObjectData = someService.setObjectData(someArray); 
    }]);

Спасибо, но с этим сервисом он больше не возвращает функцию $ resource, поэтому он не может выполнить вызов API. Как мне объединить новый сервис, который вы написали, с функцией $ resource?
@ Philip7899 Я немного незнаком с ресурсом $, но я попробую. я добавлю это в редактировании.
Спасибо, я обновил вопрос, кстати.

Simon Schüpbach · Answer 2 · 2016-04-18T17-35-00.000Z

Для обмена данными с сервисом вы можете использовать что-то вроде этого:

Создание сервиса

    .factory('objectService', function($resource){
        var internalObj = {};
        var myRes = $resource('/user/:userId', {userId:'@id'});
        return {
            setObject:function(obj){
                  internalObj = obj;
            },
            getObject:function(){
                     return internalObj;
            },
            updateObject:functon(){
                 internalObject = myRes.get({userId:123}, function(user) {
                     user.abc = true;
                     user.$save();
                 });
             }
        } 
     })

Установка данных из контроллера 1

.controller('controller1', function(objectService) {
     var obj = {
         number: 12,
         text: "hello world"
     }
     objectService.setObject(obj);
}

Получить данные в контроллере2

.controller('controller2', function(objectService) {
     var obj = objectService.getObject();
}

Я не могу помочь вам с вашей ошибкой javascript, но проблема в том, что CreateEvent не является объектом с функцией $save()

Спасибо, но с этим сервисом он больше не возвращает функцию $ resource, поэтому он не может выполнить вызов API. Как мне объединить новый сервис, который вы написали, с функцией $ resource?
Я добавляю новую функцию в сервис, включая $resource .
Спасибо, но это для обновления объекта. Я только хочу создать объект. Также откуда вы взяли пользователя?
Все имена функций только для демонстрации. Все они чепуха. Я не знаю ваших требований. Вы можете переименовать функцию в createObject если хотите. И вы можете заменить все на $resource
Спасибо, но я все еще не могу заставить $ ресурс работать. Я обновил вопрос.