Javascript 收听angularJs中的fulscreenChange事件

我使用一个按钮使用全屏API将DOM元素滑入全屏模式。这部分按预期工作。问题是，当我退出全屏模式时，我需要监听全屏更改事件并调整dom元素的大小。以下是我目前正在尝试的：

Html:

---

我没有包括resizediv函数的逻辑，但它确实可以工作。我的问题是，当我在任何变体中调用fullScreenToggle（）特别是elem.requestFullscreen（）时，我都希望看到触发全屏更改事件。。。但它也不是。。。或者我没有正确地听

$scope.

上的$on正在监听角度事件，您需要监视您请求全屏显示的元素上的全屏显示更改事件。

如果您想要监听全屏显示更改事件，您应该在指令中执行，而不是在控制器中

我制作了一个库，以一种有角度的方式来包装这种行为

---

希望有帮助

声明一个名为

isFullscreen

的变量，并使其最初等于

false

。在

fullscreenchange

事件中，更改值，如

isFullscreen=！全屏显示你现在可以检查这个var，看看它是全屏还是全屏。我想我的问题不在于进入全屏。。。我需要监听这个事件，这样当我退出全屏时，我可以正确地调整DIV元素的大小。杰森是对的
$on
侦听从
$broadcast
触发的角度事件。那么如何正确侦听它呢？我是否可以在模板中添加监听器，或者我仍然可以在控制器（首选方法）中以某种方式进行监听器？既然Angular使用jQuery，我相信您可以在控制器中执行类似的操作：Angular controller:document.addEventListener（“fullscreenchange”，function（）{}；或者我需要将该侦听器放在我的模板中，让它调用我的angular controller中的函数吗？为了可重用，您可以创建一个指令，只放置一次，然后将事件广播到$rootScope，然后在控制器中侦听。该指令可以处理浏览器特性，只需查看事件的
全屏更改
名称。
<button type="button" class="btn btn-primary" ng-click="changeVideoSize(4)">Fullscreen</button>

$scope.changeVideoSize = function(size) {

    switch (size) {

    case 1:
        resizeDiv("swfStage" , "320px" , "240px");
        break;
    case 2:
        resizeDiv("swfStage" ,"500px" ,"375px" );
        break;
    case 3:
        resizeDiv("swfStage" , "700px" , "525px" );
    break;
    case 4:
        fullScreenToggle("swfStage");
        resizeDiv("swfStage",getWidth(),getHeight());
        break;
    default:
        $scope.changeVideoSize(1);
    }

};

function fullScreenToggle(domId) {

    // full-screen available?
    if (
        document.fullscreenEnabled || 
        document.webkitFullscreenEnabled || 
        document.mozFullScreenEnabled ||
        document.msFullscreenEnabled
    ) 
    {
        var elem = document.getElementById(domId);
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
            elem.webkitRequestFullscreen();
        }   
    }


}

// Events
$scope.$on("fullscreenchange", function(e) {
    console.log("fullscreenchange event! ", e);
});
$scope.$on("mozfullscreenchange", function(e) {
    console.log("mozfullscreenchange event! ", e);
});
$scope.$on("webkitfullscreenchange", function(e) {
    console.log("webkitfullscreenchange event! ", e);
});
$scope.$on("msfullscreenchange", function(e) {
    console.log("msfullscreenchange event! ", e);
});