javascript - 我应该将事件监听器代码放在所有 Controller 都使用的 AngularJS 中的什么位置？

Question

我想在我的 AngularJS 应用程序中有一些事件监听器代码，它将应用于所有 Controller 的范围。

我基本上想在某处定义以下内容:

    document.addEventListener("online", onOnline, false);
    document.addEventListener("offline", onOffline, false);

    function onOnline() {
        console.log("just got online event");
        $scope.noNetwork = false;
    }

    function onOffline() {
        console.log("just got offline event");
        $scope.noNetwork = true;
    }

无论哪个 Controller 作用域当前处于事件状态，它都将接收事件。

Answer 1

尝试$rootScope:

var app = angular.module("yourModule",[]);
app.run(function($rootScope){
   document.addEventListener("online", onOnline, false);
   document.addEventListener("offline", onOffline, false);

   function onOnline() {
        $rootScope.$apply(function(){
            console.log("just got online event");
            $rootScope.noNetwork = false;
        });
    }

    function onOffline() {
        $rootScope.$apply(function(){
             console.log("just got offline event");
             $rootScope.noNetwork = true;
        });
    }
});

由于作用域继承，$rootScope 的属性将被所有子作用域继承。请注意，此事件发生在 Angular 之外，在这种情况下也需要使用 $apply。您的所有子作用域都可以 $watch noNetwork 更改。像这样:

$scope.$watch('noNetwork',function(newValue){
//Handle your tasks here.
});

另一种选择是创建一个服务来保存 noNetwork 属性并将该服务注入(inject)到您的 Controller 中。