I have an Angular module that I am bootstrapping manually and attempting to access its $rootScope to add an event listener for $viewContentLoaded.
Below is the code snippet:
angular.bootstrap(el, [appname]);
//////////////////////////// Fixing links
console.log('patching');
var $rootScope = angular.injector([appname]).get('$rootScope');
console.log($rootScope);// Scope { $id=139, $root=Scope, $$destroyed=false, more...}
$rootScope.$on('$viewContentLoaded', function () {
console.log('$viewContentLoaded');
});
The issue is that I'm receiving a $rootScope with id 139, but the event is not firing as expected.
If I try to access the $rootScope inside the main controller of my module, I get:
console.log('myController',$rootScope);
Scope { $id=120, $$childTail=Scope, $$childHead=Scope, more...}
Here, I'm getting a $rootScope with id 120.
When I attach the event handler to the controller within the module, it functions correctly.
So, what am I doing incorrectly? How can I retrieve the correct $rootScope of a module outside of its controller?
It's important to note that I am working in a multi-app environment. I have a main module that loads and bootstraps other modules, and I want to detect when the view content of these other modules has finished loading without individually adding code to each one manually...
Note:
I am able to access the $rootScope using this method:
var $rootScope = angular.element(el).scope().$root;
However, this approach does not work when
$compileProvider.debugInfoEnabled(false);