How to pass an array from one view to another within same controller

Question

I am just a newbie to angularjs. I have a form in one view of my application which shows on my other view. There is only one controller for the application. The user can enter the fields in the form which should get displayed on the other view. The code looks like this.

var app2 = angular.module('myApp2', ['ngRoute','ngStorage']);

app2.controller('rtCtrl', function($scope,$localStorage,$rootScope){

    $scope.names = [
                    {name:'Jani',email:'[email protected]'},
                    {name:'Hege',email:'[email protected]'},
                    {name:'Kai',email:'[email protected]'}
                ];
    $rootScope.namesfinal = $scope.names;
    $scope.saveData = function(){
    $scope.names.push({name: $scope.username, email: $scope.emailaddress});
    $localStorage.localData = $scope.names;
    $rootScope.namesfinal = $localStorage.localData;
    console.log($rootScope.namesfinal);
                };

    }
                );

app2.config(['$routeProvider',function($routeProvider) {
             $routeProvider.when('/page2', {
                       templateUrl: 'Home2.html',
        controller: 'rtCtrl'
                       }).when('/page3', {
                       templateUrl: 'Home3.html',
        controller: 'rtCtrl'
                               }).otherwise({
                            redirectTo: '/'
                            });
                  }]);

<div ng-app="myApp2" ng-controller="rtCtrl">
<!--a href="#page2">CLick here for page 2</a-->
<button ng-click="traverse()">Page2</button><br>
<a href="#page3">CLick here for page 3</a>
<div ng-view></div>
</div>

//The second page comes here

<div>This is the second page<br>
<!--<button ng-click="locstor()">Click Here</button>-->
<span ng-repeat="x in namesfinal">
Name: <span ng-bind="x.name"></span>      Email: <span ng-bind="x.email"></span><br>
</span>
</div>

//the form page comes here

<div>This is the third page
<form name="form1" novalidate>
    Name: <input type="text" name="username" ng-model="username" required>
        <span ng-show="form1.username.$pristine">Enter email here.</span>
        <span style="color:red;" ng-show="form1.username.$dirty && form1.username.$invalid && form1.username.$error.required">
  User name cannot be left empty.</span><br>
    Email: <input type="email" name="emailaddress" ng-model="emailaddress" required>
 <span style="color:red;" ng-show="form1.emailaddress.$error.email">Email is not valid.</span><br>
<!--    Password: <input type="password" ng-model="userpassword" required><span ng-show="">Password should be at least 8 characters long</span>-->
        <input type="submit" value="Submit" ng-disabled="form1.username.$pristine || form1.emailaddress.$pristine || form1.username.$dirty && form1.username.$invalid || form1.emailaddress.$dirty && form1.emailaddress.$invalid"
  ng-click="saveData()">
</form>
</div>

Can you tell me why is the array not getting updated on the view of the second page after clicking on the submit button.

Answer 1

Need to understand that although you are using the same controller ... each view will run a new instance of that controller and the scope from previous path (controller) is destroyed once view changes.

You need to use a service to share data across the application

Answer 2

You use 1 controller for two separate pages. The problem is - when you go to another page your current controller will be destroyed and that next page's controller will be created. This will happen even if you use 1 controller function for 2 different pages. You can see it if you place debugger in your controller code. So you can't use controller to save state when moving to another page.

You can use factory for this. factories (and services and providers) are singletons in angular. So they won't be recreated when you go to another page.

tl;dr : create a factory to save your data when you move to another page

Answer 3

You have two "instances" of your controller, one for each view. If you wan't to share data between those you can use services/factories. Angular guarantees that only one instance will exist of a given service during the app's lifecycle and this makes it an ideal place to share data.

Other approach is to use the rootScope. It looks easier but this solution can easily lead to a polluted rootScope. In general it is better to separate your code so it will be easier to write nice unit tests and maintain the code.