Cannot access $rootScope property from controller?

Question

In angular's run block i am setting one property on $rootScope however when controller executes that property doesn't exists on $rootScope.

When application starts, in debugger i see "adal:loginSuccess" handler gets executed and $rootScope.isAdmin do get sets to "true", however when controller start executing the $rootScope.isAdmin doesnt exists on $rootScope. Why? Below is my code

app.js

    var main = angular.module('mymodule', [
        'ngAnimate','ngRoute','Mycontrollers','AdalAngular'...

    ]);

    main.config(['$httpProvider','adalAuthenticationServiceProvider', function ($httpProvider,adalProvider) {  
        adalProvider.init(
            {
                // config Azure Client ID Here
            },
            $httpProvider
            );

    }]);

    main.run(["$rootScope", "$state", "API", "usSpinnerService",
        function ($rootScope, $state, API, usSpinnerService,) {      

             $rootScope.$on("adal:loginSuccess", function () { 
                       $rootScope.isAdmin = user.isAdmin;
             });

        }]);

Controller.js

angular.module('Mycontrollers', [])
    .controller('HeaderCtrl', ['$rootScope','$scope',   'adalAuthenticationService', function ($rootScope, $scope, adalAuthenticationService) {

    //$rootScope.isAdmin is set in angular's run block above
    //however $rootScope.isAdmin does not exists here, WHY????? 

    }])

the "adal:loginSuccess" event handler probably runs after the controller — rob, Apr 19 '16 at 21:20
how do i ensure adal:logingSuccess occurs first before controller start executing? — LP13, Apr 19 '16 at 21:29
If you want to prevent a controller from loading until something else loads you can you a router `resolve` https://docs.angularjs.org/api/ngRoute/provider/$routeProvider — rob, Apr 19 '16 at 21:39
we are using $stateProvider. Also can you please provider How we do that? — LP13, Apr 19 '16 at 21:57
ui-router has the same feature https://github.com/angular-ui/ui-router/wiki#resolve — rob, Apr 19 '16 at 21:58

score 0 · Answer 1 · answered Apr 19 '16 at 21:22

0

Because you have var main = angular.module('mymodule', [...]), so your app is named 'mymodule'; however, for your controllers you have angular.module('Mycontrollers', []). What you've done is instantiate a new instance of Angular. Angular will only bootstrap the first instance of instantiation, so would need to use angular.bootstrap, but I'm guessing that's not actually what you want. Instead, replace angular.module('Mycontrollers', []) with angular.module('mymodule').controller(...). Notice the lack of brackets. Now you're using the module you already instantiated.

answered Apr 19 '16 at 21:22

Chris Stanley

2,766
2
13
18

no thats not correct, see my updated code. 'MyController' module is actually included in main..i didnt put whole code block.. – LP13 Apr 19 '16 at 21:29
That's not a module. That's a dependency. You can't give a controller to a dependency. Also, my point about instantiating Angular again is still an issue. Since it's being instantiated, it will not share the same $rootScope as the initial instantiated Angular app of 'mymodule.' – Chris Stanley Apr 19 '16 at 21:35
@ChrisStanley you can create multiple modules in Angular and they will all share the same `$rootScope`: https://plnkr.co/edit/jSYYfUpuQuAzQ5s2pbLn?p=preview – rob Apr 19 '16 at 21:44
That's true. I'll edit that out of my comment. Don't know why I was thinking that. Nevermind... I can't edit my comment for some reason - just this one. – Chris Stanley Apr 19 '16 at 21:52

Cannot access $rootScope property from controller?

1 Answers1