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函数：

<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();但我仍然收到同样的错误。

Answer 1

要与服务交换数据，您可以使用以下内容：

创建服务

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

从controller1

设置数据

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

在controller2中获取数据

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

我无法帮助您解决javascript错误，但问题是CreateEvent不是具有函数$save()的对象

Answer 2

您可能会收到错误，因为'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'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); 
    }]);

使用Angular Service在具有相同控制器的视图之间传递信息

2 个答案: