how to get rootScope value from routeChangeSuccess angularjs

Question

I'm trying to get rootScope value in function from routeChangeSuccess in AngularJs as per following code. But I cannot convince why rootScope value is NULL when I output with console.log.

$rootScope.updateCurrentUser = function () {
    $rootScope.loggedUser = "1";
};

$rootScope.$on('$routeChangeSuccess', function () {
    var path = $location.path();
    $rootScope.showIndex =
        path === LANG_PATH + '/';
    if ($rootScope.showIndex) {
        //undefined result found :(
        console.log('rootScope ' + $rootScope.loggedUser);
    }
});

$rootScope.updateCurrentUser();

Answer 1

It's hard to tell since your example doesn't show where the handler is attached and where the change to $rootScope.loggedUser is made, but if it's happening in a controller, you probably won't the event.

Controllers don't get created until after the event has been broadcast, and the controller of the current view will be destroyed before the next $routeChangeSuccess event is broadcast, which means you'll miss the event if you're deregistering handlers in your controller's $destroy event.

In the snippet below, you'll see the event being handled (and $rootScope.eventLog updating) in .run as you change routes, but not in the handlers in the controllers.

 angular.module('app', ['ngRoute']) .config(['$routeProvider', function($routeProvider) { $routeProvider .when('/main', { templateUrl: 'main.html', controller: 'MainCtrl' }) .when('/other', { templateUrl: 'other.html', controller: 'OtherCtrl' }) .otherwise('/main'); }]) .run(['$rootScope', function($rootScope) { $rootScope.eventLog = []; $rootScope.$on('$routeChangeSuccess', function(e, curr, prev) { // we should see this, and $rootScope.eventLog will get updated $rootScope.eventLog.push({ handler: "Run", event: e, curr: curr, prev: prev }); }); }]) .controller('MainCtrl', ['$scope', '$rootScope', function($scope, $rootScope) { var deregister = $rootScope.$on('$routeChangeSuccess', function() { // this won't happen: we'll deregister before the event is called $rootScope.eventLog.push({ handler: "Main", event: e, curr: curr, prev: prev }); }); $scope.$on('$destroy', function() { deregister(); }); }]) .controller('OtherCtrl', ['$scope', '$rootScope', function($scope, $rootScope) { var deregister = $rootScope.$on('$routeChangeSuccess', function() { // this won't happen: we'll deregister before the event is called $rootScope.eventLog.push({ handler: "Other", event: e, curr: curr, prev: prev }); }); $scope.$on('$destroy', function() { deregister(); }); }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> <div ng-app="app"> <script type="text/ng-template" id="main.html"> <p>This is the content of the main template</p> <a href="#/other">Other</a> </script> <script type="text/ng-template" id="other.html"> <p>This is the content of the other template</p> <a href="#/main">Main</a> </script> <ul> <li ng-repeat="e in eventLog track by $index"> <h3>{{e.handler}}</h3> <pre>{{e | json:2}}</pre> </li> </ul> <ng-view></ng-view> </div>