Angularjs 使用角度服务在具有相同控制器的视图之间传递信息_Angularjs_Ionic Framework_Angularjs Service_Ngresource_Angularjs Factory

Angularjs 使用角度服务在具有相同控制器的视图之间传递信息

angularjs ionic-framework

Angularjs 使用角度服务在具有相同控制器的视图之间传递信息,angularjs,ionic-framework,angularjs-service,ngresource,angularjs-factory,Angularjs,Ionic Framework,Angularjs Service,Ngresource,Angularjs Factory,我有一个跨多个视图的多步骤表单，这些视图共享一个控制器。以下是路线： .state('tab.newEventCategory', { url: '/activities/new-event-category', views: { 'tab-patient': { templateUrl: 'templates/new-event-category.html', controller: 'ActivityDashboardCtrl' } } }

我有一个跨多个视图的多步骤表单，这些视图共享一个控制器。以下是路线：

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

然后，要使用api调用保存对象，我执行

$scope.formData.createEvent（）.$save（）但我仍然收到相同的错误。
要与服务交换数据，您可以使用类似的方法：
创建服务
    .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（）
的对象，您可能会遇到错误，因为“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); 
    }]);

谢谢，但是使用此服务，它不再返回$resource函数，因此无法进行api调用。如何将您编写的新服务与$resource函数相结合？我在服务中添加了一个新函数，包括$resource
。谢谢，但这是用于更新对象的。我只想创建一个对象。还有，您从哪里获得用户？所有函数名仅供演示。他们都是胡说八道。我不知道你的要求。如果需要，可以将函数重命名为createObject
。您可以用$resource替换所有内容，谢谢，但我仍然无法使用$resource。我已经更新了这个问题。谢谢，但是使用这个服务，它不再返回$resource函数，因此无法进行api调用。如何将您编写的新服务与$resource功能结合起来？@Philip7899我对$resource有点不熟悉，但我会试试。我将在编辑中添加它。
    .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();
                 });
             }
        } 
     })

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

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

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); 
    }]);