從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）與應用程序中的實例不同。 您應該使用應用程序的rootElement中的getter .injector() 。

即如果您有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>