Javascript 处理浏览器时如何访问角度控制器'；全屏'；事件

在我的angular控制器（这是一个用于Google maps指令的控制器）中，我在document元素上添加了一个eventlistener，如下所示，这样我就可以使用全屏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方法中处理这样的事件，该方法也直接位于控制器中：

    fullScreenChangeHandler(event) {

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

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

        if (mapController) {
           .... center and resize the map
        }

---

So（event.srceelement）=文档节点。此访问控制器的方法正在工作，但不知何故已中断。无论如何，代码感觉很臭，所以一定有更好的方法。如果您能给我一些建议，我将不胜感激。

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

1） 使用$rootScope在控制器上触发“fullscreenchange”并侦听事件：

    fullScreenChangeHandler(event) {

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

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

        if (mapController) {
           .... center and resize the map
        }

使用$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，如果只有一个侦听器，则更喜欢第二个侦听器。

我发现在进入全屏时，fullscreenchange事件接收到的源元素是指令模板中的一个容器div，因此引用控制器的方式仍然有效

问题只出现在关闭映射时，在本例中，事件接收到的src元素是文档节点。在退出的情况下，我不需要访问地图

因此，我可以检查我是否进入全屏模式，并获得如下控制器：

        var containerScope;
        var mapController;

        if (event.srcElement.id) {
            if (event.srcElement.id.indexOf("myMapContainer") != -1) {
                containerScope = angular.element(event.srcElement).scope();
                mapController = containerScope.$parent.mapsCtrl;
            }
        }

然后，仅当我有权访问控制器时，我才能进行地图居中：

    fullScreenChangeHandler(event) {

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

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

        if (mapController) {
           .... center and resize the map
        }

---

为什么您需要访问mapsCtrl？我正在实现自定义的“最大化地图”和“还原地图”按钮，而不是google地图的默认按钮，“fullScreenChangeHandler”需要在使用“esc”退出全屏模式时进行地图居中和重新绘制。（我需要自定义样式以及按钮的自定义功能，这就是我不使用默认值的原因）代码是在map controller中编写的，所以为什么scope不可用。您的第二个建议很有趣。fullscreenchange或等效事件（不同浏览器的情况不同）发生在文档而不是窗口上（如果我们在角度对象上注册事件，我想我们可能不需要$scope.$apply，尽管我不完全确定）。在实际的事件处理函数（fullScreenChangeHandler）中，$scope在任何情况下对我都不可用-在映射出口上，事件可以通过文档节点作为其源接收，这意味着angular不知道我要访问哪个$scope+1作为向$rootScope广播的第一个建议，我认为这可能是一种方法，尽管我还没有测试过。不过，为了避免污染根范围，最好使用“mapFullSizeChanged”的特定事件。重要的是，您可以直接在事件处理程序（如scope.resizeMap（））中调用MapController的方法；