我在哪里可以将AngularJS中的所有控制器都使用的事件监听器代码？

我想在我的AngularJS应用程序中有一些事件监听器代码，它将应用于所有控制器的范围。我在哪里可以将AngularJS中的所有控制器都使用的事件监听器代码？

我基本上要确定某个以下几点：

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; 
    }

将接收事件问题上没有哪个控制器范围是当前活动。

来源

2014-01-30 jcm

值尝试$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的属性将被继承通过你所有的孩子范围。请注意，此事件发生在角度以外，在这种情况下也需要使用$apply。你所有的孩子的范围可以$手表noNetwork的变化。就像这样：

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

另一种选择是创建服务举行noNetwork财产，并注入该服务到您的控制器。

来源

2014-01-30 08:21:57

但愿$范围$手表监听器需要放置在每一个控制器？ – jcm

@cookiemonster：是的，否则你怎么能通知？ –

@cookiemonster：如果您只需要'noNetwork'在视图中进行绑定，则您甚至不需要$ watch，因为您的子范围将从根作用域继承此属性。 –

你可以在你的顶部控制器添加此和您的孩子控制器就可以看到$ scope.noNetwork

来源

2014-01-30 08:20:27 TestersGonnaTest

只是为了扩大@ KhanhTo的Another option行：

;(function initModule(module) { 

    module.provider('IsOnlineService', Provider); 
    function Provider() { 
    var eventNames = { 
     online: 'online', 
     offline: 'offline' 
    }; 
    this.setOnlineEventName = function(name) {eventNames.online = name;} 
    this.setOfflineEventName = function(name) {eventNames.offline = name;} 
    this.$get = OnlineService; 

    OnlineService.$inject = ['$document', '$rootScope']; 
    function OnlineService($document, $rootScope) { 
     // Listen events 
     $document.addEventListener(eventNames.online, setState.bind(this, true), false); 
     $document.addEventListener(eventNames.offline, setState.bind(this, false), false); 

     // Observer pattern: everybody can receive updates 
     var subscribers = {}; 
     this.subscribe = subscribe; 
     this.unsubscribe = unsubscribe; 

     var state = false; 
     this.getState = getState; 

     return this; 

     // Implementation 
     function subscribe(id, sub) {subscribers[id] = sub;} 
     function unsubscribe(id) {delete subscribers[id];} 
     function announceAll(value) { 
     Object.keys(subscribers, function(id){ 
      subscribers[id](value); 
     }); 
     } 

     function getState() {return state;} 
     function setState(value) { 
     state = value; 
     $rootScope.$apply(announceAll.bind(null, state)); 
     } 
    } 
    } 

})(angular.module('yourModule', [ 
]));

配置：

angular.module('app') 
.config(['IsOnlineServiceProvider', function(online){ 
    online.setOfflineEventName('away'); 
}]);

用法：

来源

2016-08-19 10:43:14

我在哪里可以将AngularJS中的所有控制器都使用的事件监听器代码？

回答

相关问题