CODEWITHSUNDEEP
javascriptangularjsinputangular-ngmodel
Lauren F
Lauren F

Reputation: 1322

Angular - Get input on one page and show value on a second page w/ same controller

I'm trying to set up my Angular app to get input on one page, then display it on a second page. I'm using ng-model to tie the two pages together. I was hoping that by using the same controller for both (where the values are stored) pages, that the information would save and display onto the second page, but it is erased.

Is there something I'm doing wrong? Is there a different way to store these input values until the page is refreshed?

Factory: 

angular.module('BSG').factory('airplaneFactory', function() {
    var name = '';
    var last_name = '';
    var color = '';

    return {
        name: name,
        last_name: last_name,
        color: color
    }
})

Airplane Controller:

angular.module('BSG').controller('AirplaneCtrl', function($scope, airplaneFactory) {
    'use strict';

      $scope.name = airplaneFactory.name;
      $scope.last_name = airplaneFactory.last_name;
      $scope.color = airplaneFactory.color;

});

Airplane Prompts Controller:

angular.module('BSG').controller('AirplanePromptsCtrl', function($scope, airplaneFactory) {
    'use strict';

      $scope.name = airplaneFactory.name;
      $scope.last_name = airplaneFactory.last_name;
      $scope.color = airplaneFactory.color;

});

Routing: 

    .when('/airplane', {
        templateUrl: 'templates/stories/airplane.html',
        controller: "AirplaneCtrl"
    })
    .when('/airplaneprompts', {
        templateUrl: 'templates/stories/airplane_prompts.html',
        controller: "AirplanePromptsCtrl"
    })

Snippet from airplane_prompts.html:

<h2>Who is this story about?</h2>
<p><input type="text" placeholder="name" ng-model="airplane.name"></p>

<h2>What is {{ airplane.name }}'s favorite color?</h2>
<p><input type="text" placeholder="favorite color" ng-model="airplane.color"></p>

Snippet from airplane.html:

Mine was {{ airplane.color }} and had a nametag on it that said {{ airplane.name }}

Upvotes: 0

Views: 700

Answers (2)

byrdr
byrdr

Reputation: 5467

$scope.airplane should be created as a service and then you can use dependency injection by inserting the service as a parameter to both controllers.

angular.module('BSG').factory('airplaneFactory', function() {
    return {
        name: 'name',
        last_name: 'last_name',
        color: 'color'
    }
})

Upvotes: 0

Oliver
Oliver

Reputation: 31

For each page make a new controller. Create a separate service to store the value(s). Each controller uses this service to get/set the value.

Look at the example "Wire up a Backend" on mainpage https://angularjs.org/ (scroll down) the Projects-factory is your storage provider. Change it from remote storage to local storage with a simple 

var myvalue;

Upvotes: 1

Related Questions