角度サービスを使用して同じコントローラでビュー間で情報を渡す

Question

コントローラを共有する複数のビューにまたがる多段階のフォームがあります。ここではルートは以下のとおりです。

.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関数が呼び出されます。これは正常にそのページ上の式はFORMDATAで正しく評価されているので、フォームの次のページに情報を渡している

<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> 

。 2ページ目で、ユーザーは、サブカテゴリピック：最後のページで

<!-- 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> 

ボタンをクリックすると、I私のブラウザのコンソールで次のエラーを取得する：

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 

誰かがERを修正するために、具体的方法もビューとの間で情報を渡すために私にどのようなサービスの仕事についての良い説明をお願いできます私はうんざりしていますか？

UPDATE：私はAPI呼び出し$scope.formData.createEvent().$save();でオブジェクトを保存するためにその後

.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"); 
      } 
     } 
}) 

が、私はまだ同じエラーが発生します：

いくつかのフィードバックに基づいて、私はこれまでサービスを書き換えました。

Answer 1

あなたがそのようなものを使用することができるサービスとデータを交換する：

はcontroller1

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

から

.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(); 
       }); 
      } 
     } 
    }) 

設定データはコントローラ2

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

でデータを取得するサービスを作成します。

は、私はあなたのJavaScriptエラーのお手伝いをすることはできませんが、問題はCreateEvent機能を持つオブジェクトではないこと、である$save()

Answer 2

「でCreateEventは」保存と呼ばれる機能を持っていないので、あなたがエラーを取得される可能性があります（） 。

編集：より多くの研究をすると、 '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's 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); 
    }]);