Question

我正在使用ndg_date来提升从服务到控制器的事件。

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

以下是我的代码

普通JavaScript

$rootScope.$emit()

当dom准备好时调用上面的内容：

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

    aMsgHandlerService.TestScopeWatch();
}

服务

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

Answer 1

您需要获得正确的应用程序注入， angular.injector 创建一个新的注入器，它与引导您的应用程序的注入器无关。因此，从该注入器获取的服务实例（yourService，rootScope）与应用程序中的实例不同。您应该使用应用程序的 .injector() 中的getter rootElement 。

即如果您有ng-app或手动引导，请从该元素中取出注射器。例如：

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

如果您的应用根是文档（html），那么从document获取注入，即：

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>

从Plain JavaScript调用Angular Service到Controller

1 个答案: