I am using $rootScope.$emit() for raising events from service to controller.

It is working fine when emitting from the instance of service that is referenced in controller but $rootScope.$on is not getting called when emitting from the instance of service I got from angular injector in plain javascript .

Following is my code

Plain JavaScript

    var msgHandlerJS = function () {
    var injector = angular.injector(['ng', 'services']);
    var aMsgHandlerService = injector.get('msgHandlerService');

    aMsgHandlerService.TestScopeWatch();
}

Calling the above when dom is ready :

angular.element(document).ready(function () {    
    msgHandlerJS();
});

Service

(function (module) {    

    var msgHandlerService = function ($rootScope, $http, $q, $timeout) {  
        var TestScopeWatch = function () {
            $http.get('~/test.json').then(function (result) {
                EmailPacket = result.data.Packet;

                $rootScope.$emit("EmailPacketChanged", EmailPacket);     
            });
        };

        return {
            //making public
            TestScopeWatch:TestScopeWatch,
        };
    };

    module.factory("msgHandlerService", ["$rootScope","$http", "$q","$timeout", msgHandlerService]);

}(angular.module("services")));

Controller

(function (module) {   
    function testController($rootScope,$scope, msgHandlerService) {
        $rootScope.$on("EmailPacketChanged", function(event,data){
            alert('Here I am');
        };
    };

    module.controller("testController", ["$rootScope","$scope", "msgHandlerService",  testController]);    

}(angular.module('app')));

I am using $rootScope.$emit() for raising events from service to controller.

It is working fine when emitting from the instance of service that is referenced in controller but $rootScope.$on is not getting called when emitting from the instance of service I got from angular injector in plain javascript .

Following is my code

Plain JavaScript

    var msgHandlerJS = function () {
    var injector = angular.injector(['ng', 'services']);
    var aMsgHandlerService = injector.get('msgHandlerService');

    aMsgHandlerService.TestScopeWatch();
}

Calling the above when dom is ready :

angular.element(document).ready(function () {    
    msgHandlerJS();
});

Service

(function (module) {    

    var msgHandlerService = function ($rootScope, $http, $q, $timeout) {  
        var TestScopeWatch = function () {
            $http.get('~/test.json').then(function (result) {
                EmailPacket = result.data.Packet;

                $rootScope.$emit("EmailPacketChanged", EmailPacket);     
            });
        };

        return {
            //making public
            TestScopeWatch:TestScopeWatch,
        };
    };

    module.factory("msgHandlerService", ["$rootScope","$http", "$q","$timeout", msgHandlerService]);

}(angular.module("services")));

Controller

(function (module) {   
    function testController($rootScope,$scope, msgHandlerService) {
        $rootScope.$on("EmailPacketChanged", function(event,data){
            alert('Here I am');
        };
    };

    module.controller("testController", ["$rootScope","$scope", "msgHandlerService",  testController]);    

}(angular.module('app')));

• javascript
• angularjs

• @pherris It is working fine when emitting from the instance of service that is referenced in controller but $rootScope.$on is not getting called when emitting from the instance of service I got from angular injector in plain javascript . – Dazz Commented Jun 3, 2015 at 18:44
• @kumaro, can you provide your hrml? – Grundy Commented Jun 3, 2015 at 18:45
• Did you confirm that you are executing $rootScope.$emit? – pherris Commented Jun 3, 2015 at 18:47
• 1 Do you have an ng-app on the page? – PSL Commented Jun 3, 2015 at 18:47
• @pherris Yes, emit is executing . I see a network call to get test.json – Dazz Commented Jun 3, 2015 at 18:51

1 Answer 1

You need to get the proper injector of the application, angular.injector creates a new injector, it has nothing to do with the injector that bootstrapped your app. So the instance of the service (yourService, rootScope inside it) you get from that injector is different instance than what is in the app. You should instead use the getter .injector() from the rootElement of the application.

i.e if you have an ng-app or manually bootstrapping, get the injector out of that element. Example:

 var injector = angular.element(document.querySelector('[ng-app]')).injector();

If your app root is document (html) then get injector from the document i.e :

var injector = angular.element(document).injector()

Also if you want any scope bindings to reflect you also need to invoke a digest cycle (alert will work fine ofcourse):

var msgHandlerJS = function() {
   var injector = angular.element(document).injector();
   var aMsgHandlerService = injector.get('msgHandlerService');
   var $rootScope = injector.get('$rootScope');
   aMsgHandlerService.TestScopeWatch();
   $rootScope.$digest();
}

(function(module) {

  var msgHandlerService = function($rootScope, $http, $q, $timeout) {
    var TestScopeWatch = function() {
      //$http.get('~/test.json').then(function(result) {
      //  EmailPacket = result.data.Packet;

      $rootScope.$emit("EmailPacketChanged", {});
      // });
    };

    return {
      //making public
      TestScopeWatch: TestScopeWatch,
    };
  };

  module.factory("msgHandlerService", ["$rootScope", "$http", "$q", "$timeout", msgHandlerService]);

}(angular.module("services", [])));

(function(module) {
  function testController($rootScope, $scope, msgHandlerService) {
    $rootScope.$on("EmailPacketChanged", function(event, data) {
      $scope.got = "got the message!!";
    });
  }

  module.controller("testController", ["$rootScope", "$scope", "msgHandlerService", testController]);

}(angular.module('app', ['services'])));

var msgHandlerJS = function() {

  var injector = angular.element(document.querySelector('[ng-app]')).injector();
  var aMsgHandlerService = injector.get('msgHandlerService');
  var $rootScope = injector.get('$rootScope');
  aMsgHandlerService.TestScopeWatch();
  $rootScope.$digest();
}
angular.element(document).ready(function() {
  msgHandlerJS();
});

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="test" ng-app="app" ng-controller="testController">
  {{got}}
</div>