0

I am trying to create a multistep form and am having trouble sharing data between views/states. I'm not sure that the way I'm even going about this is accurate as I am new to angular-ui-router. Here are my routes:

.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'
    }
  }
})

I am trying to use the routes above so that once someone chooses a category, they then go to a page where they choose a subcategory. Here is the new-event-category page:

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

and here is the controller for the page:

.controller('ActivityDashboardCtrl', function($scope, $stateParams, EventCategory, $state) {
  $scope.formData = {};
  $scope.event_categories = EventCategory.query();

  $scope.moveToEventSubCategory = function(event_category){
    $scope.formData.category = event_category;
    $state.go('tab.newEventSubCategory');
  }
})

My issue is that now I want the newEventSubCategory state to have access to the same formData object so it can add subcategories. There will be more pages to this multistep form after this and I want them to all have access to the same formData variable. How do I do this?

Philip7899
  • 4,599
  • 4
  • 55
  • 114
  • 1
    Create a service to get/set the form data – Ronnie Apr 12 '16 at 22:55
  • how would i do that? i am very new to angular – Philip7899 Apr 12 '16 at 23:01
  • Are you going to use one controller for all the steps or a single? – Ronnie Apr 12 '16 at 23:10
  • That's what I'm not sure about. I think it would be a better idea to use one. – Philip7899 Apr 12 '16 at 23:12
  • Ok, if you want to use one, http://stackoverflow.com/questions/27696612/how-do-i-share-scope-data-between-states-in-angularjs-ui-router else sharing data between controllers http://stackoverflow.com/questions/21919962/share-data-between-angularjs-controllers which would be related to my first comment – Ronnie Apr 12 '16 at 23:13

1 Answers1

1

If you want to communicate between controllers/states you best option it what @ronnie mentioned; creating a service or factory.

Have a look at this if you want to work out what services are and how to user them: AngularJS Step-by-Step: Services

MrHaze
  • 3,786
  • 3
  • 26
  • 47