how to get rootScope value from routeChangeSuccess angularjs - 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>
Other
</script>
<script type="text/ng-template" id="other.html">
<p>This is the content of the other template</p>
Main
</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>