Question

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

HTML：

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

我没有包含resize div函数的逻辑，但确实有效。我的问题是，当我在任何变体中调用fullScreenToggle（）特别是elem.requestFullscreen（）时，我希望看到全屏变化事件被触发......但它要么不是......或者我没有正确地听它。。

Answer 1

$scope.$on正在侦听角度事件，您需要在要求全屏请求的元素上查看fullscreenchange事件。

Answer 2

如果你想收听fullscreenchange事件，你应该在一个指令中，而不是在一个控制器中。

我已经建立了一个以有棱角的方式包裹这种行为的库angular-screenfull

希望它有所帮助！

在angularJs中监听fulscreenChange事件

2 个答案: