Angular service function being called multiple times

Question

I have a angular service function that is being called multiple times. In the index.html page I have the following line:

<li><i class="pull-right"></i><br/>{{appCtrl.service.getCurrentUser()}}&nbsp;</li>

In the application controller I set the variable

appCtrl.controller('AppController', function ($state, securityService, $log) {

        $log.info('App controller');

        var appCtrl = this;
        appCtrl.service = securityService;
});

In my service I exposed the function

   login.factory('securityService', function ($window, $log) {

    var currentUser;

    return {
        setCurrentUser: function (user) {
            currentUser = user;
            $window.sessionStorage.setItem('User', JSON.stringify(currentUser));
        },
        getCurrentUser: function () {
            $log.info('Calling current user');
            if (!currentUser) {
                var storedObject = $window.sessionStorage.getItem('User');
                currentUser = JSON.parse(storedObject);
            }
            return currentUser;
        }
    }
});

The following line in the getCurrentUser function gets called multiple times when the application starts up or page refresh is being done.

$log.info('Calling current user');

The controller is being called only once, I monitor it by looking at $log.info('App controller');

Is it being called as part of the dirty checking process or am I doing something wrong?

udalmik · Accepted Answer · 2015-10-06 13:43:58Z

5

Angular calls your function on every digest cycle, you can set breakpoint inside the function and check it. If you are on 1.3 version, then please take a look at One Time Binding feature. If not then call the service inside the controller and bind view to some scope variable:

$scope.currentUser = securityService.getCurrentUser();

And inside view bind to scope variable:

{{currentUser}}

edited Oct 6, 2015 at 13:43

answered Oct 6, 2015 at 13:35

udalmik

8,02829 silver badges42 bronze badges

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

3 Comments

Rentius2407 Over a year ago

Hi, the problem with setting the function to a variable on the app controller is that the app controller sets the variable to the initial value with app startup (which is undefined). When the setCurrentUser on the factory gets called from the login controller the variable in the app controller doesn't get updated.

udalmik Over a year ago

Then I would use some standard event mechanism (all this $broadcast/$emit/$on stuff) to update other controllers when user value updated by login controller.

Rentius2407 Over a year ago

Thank you udalmik, I have gone for the $broadcast and $on strategy. It works perfectly for my scenario.

Kirill Ryabin · Accepted Answer · 2015-10-06 13:38:41Z

Try this, this is correct factory declaration. Because internally AngularJS calls yout factory like: securityService(injects); , each time you inject (use) your factory.

login.factory('securityService', function ($window, $log) {
        var currentUser;
        return {

            setCurrentUser: function (user) {
                currentUser = user;
                $window.sessionStorage.setItem('User', JSON.stringify(currentUser));
            },
            getCurrentUser: function () {
                $log.info('Calling current user');
                if (!currentUser) {
                    var storedObject = $window.sessionStorage.getItem('User');
                    currentUser = JSON.parse(storedObject);
                }
                return currentUser;
            }  
        };

});

Collectives™ on Stack Overflow

Angular service function being called multiple times

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related