Keep form input on route change AngularJS

Question

Consider this example:

Main.html:

<html>
    <body>
        <script>
            angular.module('app', ['ngRoute']).config(function($routeProvider) {
                $routeProvider
                    .when('/page1', { templateUrl : 'page1.html' })     
                    .when('/page2', { templateUrl : 'page2.html' })
            })
        </script>

        <a href="#page1/">Page 1</a>
        <a href="#page2/">Page 2</a>

        <div ng-view></div>
    </body>
</html>

page1.html

Page 1: <input type="text">

page2.html

Page 2: <input type="text">

DEMO: http://plnkr.co/edit/1BfO7KkHeMD3EpsULNGP?p=preview

Click on one of the links Page 1 or Page 2. Input something in the field and then click on the opposite link. The field is cleared. Is there a way to keep input? This is very useful if a user is posting a comment, but has to login before the changes can be saved. The user will be redirected to a login page, and after login be redirected back to the input page.

I think you may be interested in looking into HTML5's Storage interface: w3.org/TR/webstorage/#storage — J. Titus
– J. Titus, Commented Oct 30, 2014 at 1:39

DJ22T · Accepted Answer · 2015-08-12 15:57:39Z

3

You can use a factory (or value) to provide an simple way to share an object among controllers.

Here is an example:

myApp.factory('DataHolder', function (){
 return { myData: true, otherData: 'haha' };
});
// Or, with value
myApp.value('DataHolder', { myData: true, otherData: 'haha' });

And then, in your controllers:

myApp.controller('CtrlA', function ($scope, DataHolder){
  $scope.sharedData = DataHolder;
});

myApp.controller('CtrlB', function ($scope, DataHolder){
  $scope.sharedAsWell = DataHolder;
});

And, inside your views:

<div ng-controller="CtrlA">
  The other data is: {{sharedData.otherData}}, and mine is: {{sharedData.myData}}
</div>
<div ng-controller="CtrlB">
  <input type="text" ng-model="sharedAsWell.otherData"/>
</div>

Thanks to @ippi, he implemented it: Plnkr implementation

edited Aug 12, 2015 at 15:57

DJ22T

1,6483 gold badges34 silver badges69 bronze badges

answered Oct 30, 2014 at 2:05

Ivan Seidel

2,3826 gold badges34 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Lander Van Breda Over a year ago

Beat me to it, would use myApp.value('DataHolder',{}) though makes it a bit more readable for me.

ippi Over a year ago

And here op's plunk updated after Ivan's suggestion. plnkr.co/edit/wI5aufzIFozvAQ3Zdz67?p=preview

user1506145 Over a year ago

It just seems a little bit too cumbersome for just saving the state... plnkr.co/edit/a88cOYDVORDHQV3b5NGJ?p=preview

Dalibor Over a year ago

:(( What? AngularJS needs so much tweeking just to preserve state? I'm getting more and more disappointed in this technology, although I was thrilled when introduced to basics

bencripps · Accepted Answer · 2014-10-30 02:19:31Z

For something like this, I usually default to a directive because you are injecting functionality into HTML elements rather than a service/factory. (But that's just personal preference). Anyway, here's a WORKING FIDDLE of a directive which relies on localStorage.

.directive( 'persist', ['$parse' , function( $parse ) {

    return {

        restrict: 'A',

        link: function( $scope, elm, attrs ) {

          var set = function( val, type ) {
            localStorage.setItem( type, val );
          };

          var get = function( type ) {
            return localStorage.getItem( type );
          };

          elm.bind( 'change' , function( e ) {

            set( this.value, elm.prop('id') );

          });

          var persistedVal = get( elm.prop('id') );

          if ( persistedVal ) {

            elm.val(persistedVal) 

          }

        }

      }
}]);

Collectives™ on Stack Overflow

Keep form input on route change AngularJS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related