javascript - 处理浏览器 'full screen' 事件时如何访问我的 Angular Controller ？

Question

在我的 Angular Controller (这是用于 Google map 指令的 Controller )内，我在文档元素上添加了一个事件监听器，如下所示，这样我就可以使用全屏API:

        if (document.addEventListener) {
            document.addEventListener("webkitfullscreenchange", this.fullScreenChangeHandler, false);
            document.addEventListener("mozfullscreenchange", this.fullScreenChangeHandler, false);
            document.addEventListener("fullscreenchange", this.fullScreenChangeHandler, false);
            document.addEventListener("MSFullscreenChange", this.fullScreenChangeHandler, false);
        }

然后，我在 fullScreenChangeHandler 方法中处理这样的事件，该方法也直接位于 Controller 中:

    fullScreenChangeHandler(event) {

        var containerScope = angular.element(event.srcElement).scope();
        var map = containerScope.map;
        var mapController = containerScope.$parent.mapsCtrl;

因此 (event.srcElement) = 文档节点。这种访问 Controller 的方法是有效的，但不知何故被破坏了。无论如何，代码感觉很臭，所以一定有更好的方法。如果有任何有关方向的建议，我将不胜感激。

Answer 1

我认为还有两种其他方法可以实现您的功能。

1) 使用 $rootScope 触发“fullscreenchange”并监听 Controller 上的事件:

// inside fullScreenChangeHandler
// inject $rootScope 
var $body = angular.element(document.body);           
var $rootScope = $bodyF.injector().get('$rootScope');  
$rootScope.broadcast('FULL_SIZE_CHANGED');

使用 $scope.on('FULL_SIZE_CHANGED',...) 在 MapController 上正常监听事件

2) 在MapController 中编写事件处理程序。

//inside MapController
angular.element($window).on('fullscreenchange', fullScreenChangeHandler);

fullScreenChangeHandler(evt){
    //call resize map here
    scope.resizeMap()
    ...
    // you need $scope.$apply to notify angular about the changes because this event outside of angular context:
    $scope.$apply();
}

我不喜欢 rootScope，如果您只有一个监听器，我更喜欢第二个。