Directive can't invoke factory after reloading the page in Angular Js?

Question

I am calling factory from directive, But scope is not persist after reloading the page. When I login with my application then It is working fine but when I reload the page Then scope is lost. I am sharing my directive and factory code.

Directive

"use strict";
    angular.module('app.auth').directive('loginInfo', function(User){

        return {
            restrict: 'A',
            templateUrl: 'app/auth/directives/login.tpl.html',
            link: function(scope, element){
                User.initialized.then(function(){
                    scope.user = User
                });
            }
        }
    })

Factory

 'use strict';

    angular.module('app').factory('User', function ($http, $q, APP_CONFIG,Rh,$rootScope,RhAuth,$location) {
        var dfd = $q.defer();

        var UserModel = {
            initialized: dfd.promise,
            username: undefined,
            picture: undefined,         

        };
        UserModel.getInfo=function(){ 
           Rh.one('userbase/users/'+RhAuth.getUserid()).get().then(function(response)
                            {                           
                              UserModel.username = response.username;
                              UserModel.picture= response.avatar;                            
                              dfd.resolve(UserModel)
                            },
                            function (error){
                              dfd.resolve(error);
                            });
        }    
        return UserModel;
    });

login.tpl.html

<div class="login-info">
    <span> 
        <a  href="" >
            <img ng-src="{{user.picture}}" alt="me" class="online">                    
        </a>
     </span>
</div>

I putted debugger in console.
Without Reloading

After Reloading

I want to persist picture value.

After reload the page User.initialized.then(function(){ it is become undefined.

I have seen one link retain angular variables after page refresh, But I am not able to solve my problem. Please share your idea.

score 0 · Answer 1 · answered Oct 30 '17 at 10:05

For persisting anything after page reload , and in your case being the picture value, the best option is to use local storage for it and on logout you can clear the local storage.

On page reload check if the value is present in local storage or else fetch from network request.

https://stackoverflow.com/a/26118991/4861453

Directive can't invoke factory after reloading the page in Angular Js?

1 Answers1