Angular injecting $rootScope in provider

Question

I cannot access $rootScope inside of a provider.I looked lot of angular other modules implementations. it is the same as how i implemented. What is wrong? it tried urload as a separate function(similar to other getValue function) it did not work

Error is $emit is undefined

 define(['angularAMD'], function () {

        var contextServiceModule = angular.module('contextService', []);

        var contextService = function () {

            var context = {};

            this.$get = ['$rootScope', function ($rootScope) {
                console.log($rootScope);
                return function (){
                    return {
                        init: init,
                        getValue: getValue,
                        setValue: setValue,
                        urlLoad:  function () {                      
                            $rootScope.$emit('onInit', {});/// error here
                        }
                    };
                };
            }];

            this.init = function () {
                return context;
            };

            this.getValue = function (key) {
                var value = context[key] ? context[key] : null;
                return value;
            };

            this.setValue = function (key, value) {
                context[key] = value;
            };



        }

        contextServiceModule.provider('contextService', contextService);

    });

Answer 1

You can't inject $rootScope into the provider $get function because it isn't yet available. However, you can inject it manually when the function is called.

this.$get = ['$injector', function ($injector) {
    return function (){
        return {
            init: init,
            getValue: getValue,
            setValue: setValue,
            urlLoad:  function () {
                 var $rootScope = $injector.get('$rootScope');
                 console.log($rootScope);
                 $rootScope.$emit('onInit', {});/// error here
            }
        };
    };
}];

Answer 2

Angular providers are created during the configuration phase and $rootScope isn't available until the app run phase. Here are a couple Angular resources on it and a similar question:

https://docs.angularjs.org/guide/module

https://docs.angularjs.org/guide/providers

https://stackoverflow.com/a/10489658/3284644

Answer 3

That's how i was getting $rootScope to broadcast messages from React.js to Angular. In case if your ng-view isn't located in body, use yours instead.

function $broadcast(event, args]) {
angular.element('body').injector().invoke([
    '$rootScope',
    '$timeout',
    ($rootScope, $timeout) =>
    {
        args.unshift(event);
        $timeout(() => {
            $rootScope.$broadcast.apply($rootScope, args);
        });
    }
]);

}

Got it from here: https://www.bimeanalytics.com/engineering-blog/you-put-your-react-into-my-angular/

Answer 4

!! IMPORTANT: The below solution does not work when minified. For this you need to do dependency injection, but than $get cannot be called during config phase

app.provider('someHandler', function() {
    this.$get = function ($rootScope) {
        function doBroadcast(words) {
            $rootScope.$broadcast(words);
        }

        return {
            shout: function (words) {
                doBroadcast(words);
            }
        }
    }
});

If you need to use in the config phase you can do the following

app.config(['someHandlerProvider', function(someHandlerProvider) {
    someHandlerProvider.$get().shout('listen up');
}

During run you can just do someHandler.shout('listen up')