从Plain JavaScript调用Angular Service到Controller

Question

我$rootScope.$emit()用于从服务到控制器提升事件.

当从控制器中引用的服务实例发出但$ rootScope时,它正常工作.当从我在普通javascript中从角度注入器获得的服务实例发出时,$ on不被调用.

以下是我的代码

简单的JavaScript

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

    aMsgHandlerService.TestScopeWatch();
}

当dom准备就绪时调用上面的内容:

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

服务

(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")));

调节器

(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')));

Answer 1

您需要获得应用程序的正确注入器,angular.injector创建新的注入器,它与引导您的应用程序的注入器无关.因此,从该注入器获取的服务实例(yourService,rootScope)与应用程序中的实例不同.您应该改用吸气.injector()从rootElement应用程序的.

即如果您有一个ng-app或手动引导,请从该元素中取出注射器.例:

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

如果您的应用程序根目录是document(html),那么从documentie 获取注入:

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

此外,如果您希望任何范围绑定反映您还需要调用摘要周期(警报将正常工作):

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.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="test" ng-app="app" ng-controller="testController">
  {{got}}
</div>