angularjs - Angular service reset when changing page through Angular routes -
i have multi page signup form , need persist data until last step , user can jump step , edit.
i using service "user" singleton object 6 steps.
userservice.js
myapp.service('user',function($http,auth,$location,$rootscope){ var register; var c_user = []; // using angular devise plugin // sample user response // {"id":1,"email":"demo@gmail.com","mobile":"8951112312","name":"","admin":true,"created_at":"2014-06-25t12:07:33.000z","updated_at":"2014-08-19t06:36:55.000z"} auth.currentuser().then(function(user) { c_user.push(user); }); return { register:register, c_user:c_user } }) headercontroller.js
function headercontroller($scope,user) { $scope.c_user = user.c_user; $scope.reg = user.register; $scope.$watch( function () { return user.register; }, function ( register ) { $scope.reg = user.register; }); } signupcontroller.js
function signupcontroller($scope,user) { $scope.$watch('user', function(user){ user.register = user; }); } this binding works , when change $scope.user , service variable getting updated getting reflected in other controllers too. when change page , service object "user.register" getting reset. below routes , view.
routes.js.erb
myapp.config(function($stateprovider, $urlrouterprovider, $locationprovider) { $locationprovider.html5mode(true).hashprefix('!'); .state('register', { url: "/register/:step", templateurl: "/assets/user/register.html", controller: "signupcontroller" }) }); register.html
<div ng-show="step == 1"> <input type="text" ng-model="user.step1.name"> </div> <div ng-show="step == 2"> <input type="text" ng-model="user.step1.email"> </div> <div ng-show="step == 3"> <input type="text" ng-model="user.step1.mobile"> </div> <a href="/register/{{1* step +1}}" ng-show="1* step < 3"> proceed step {{1* step +1}}</a> <a href="/register/{{1* step -1}}" ng-show="1* step > 1"> step {{1* step -1}}</a> irrelevant above question
@apairet : headercontroller scenario
i using angularjs rails application has application layout , ui-view.
<header> <div class="logo-header" ng-controller="headercontroller"> <span class="logo"><a href="/"><img src="/assets/logo.png"></a></span> <span class="header-icons pull-right"> <span ng-show="c_user[0]"> hi, {{c_user[0].name}} <a href="#" ng-click="logout()"> <i class="fa fa-stop"></i> </a> </span> <span ng-hide="c_user[0]"> <a href="/register/1"> <span>sign now<span> </a> | <a href="/login"> <span>sign in now<span> </a> </span> </div> <div class="menu-header"> <paper-icon-button class="menu-icon" icon="menu"></paper-icon-button> <span flex>mutual funds</span> </div> </header> <body> <div ui-view> </div> </body> i using user service store current user info , header controller using service. tried use same "signupcontroller" header
but when navigate signup page , controller getting initiated 2 times, thought create separate controller handle header ui bindings.
here why fails: each time change route, controller 'signupcontroller.js' instantiated. when instantiated, several $digest cycle performed , watch called accordingly. when run first time, watch expression return 'undefined'. can test setting console.log inside watch expression:
function signupcontroller($scope,user) { var count = 0; $scope.$watch('user', function(user){ console.log(count, user) count += 1; user.register = user; }); } you fix assigning $scope.user user.register:
function signupcontroller($scope,user) { $scope.user = user.register; $scope.$watch('user', function(user){ user.register = user; }); } however $watch expression useless since using ngmodel. controller simplified to:
function signupcontroller($scope,user) { $scope.user = user.register; } moreover, not understand purpose of headercontroller. can show how use , explain goal?
Comments
Post a Comment