Passing $scope.variable from view to view

Question

I have a basic ionic app which allows as user to enter their first name and last name, beneath those two fields is a button which says next.

On click the user is passed to the terms page where they are shown are shown text on a screen, after click accept terms button I fire an ngResource query to post the data to the server.

My form works great without a terms screen if the submit button is on the first page but on the second it's almost like the postData is refreshed and the data wipes.

See my code:

First Form Page (State = enterdetails)

    <input type="text" name="first_name" ng-model="postData.first_name" placeholder="Enter First Name">

    <input type="text" name="last_name" ng-model="postData.last_name" placeholder="Enter Last Name">

    <button class="button button-cv button-large button-block" style="margin-bottom:20px" ng-click="terms()">Next</button>

Second Page with Terms (State = terms)

TERMS TEXT
<button class="button button-cv button-large button-block" ng-click="newPost()">Accept & Sign Up</button>

Controller:

.controller('memberCtrl', function($scope, $http, $state, Post, $window) {

            $scope.postData = {}; //object to collect the data to post
            $scope.postData.first_name = '';
            $scope.postData.last_name = '';

            $scope.terms = function(){
                $state.go('terms');
            }

            $scope.newPost = function() {

                var post = new Post($scope.postData);
                post.$save(); // postData posted to server and saved.

                $state.go('enterdetails'); // after submit go back to main screen again
            }
})

Is there any reason why the postdata doesn't stick when moving to the terms page? like i said if I just put the newPost() on the first page this works fine its when the user has to accept the terms.

Answer 1

When setting up routing (with ui-router for ionic), you create a template and a controller for each state. This means that when you use $state.go() , the template is changed, and a new controller is instantiated.

For every controller created, a new $scope is also created for that particular controller. So while you are on the member page, $scope.postData exists, and is usable. However, when you transition to the terms state, that controller is discarded, and a new one is used (destroying your post data).

What you want to do is create something like a service to manage data that you want to persist between state changes. For example:

.service('UserService', function(){
    var user = {
        first_name: '',
        last_name: ''
    };

    this.getUser = function(){
        return user;
    };
});

Then you simply need to inject this service into both your controllers, and edit the object returned by UserService.getUser(); . Once you are ready to post, use the same object to create your resource.