基于angular的退出全屏,全屏显示以及关闭系统

html中的代码:
<li class="dropdown" id="dropdown4">
    <a href="#"  class="dropdown-toggle" data-toggle="dropdown" ng-bind="window"><b class="caret">b>a>
    <ul class="dropdown-menu" ng-controller="screen">
        <li id="view-fullscreen">
            <a href="#"  ng-click="fullScreen()">全屏显示a>
        li>
        <li class="divider">li>
        <li id="cancel-fullscreen">
            <a href="#" ng-click="exitScreen()">退出全屏a>
        li>
        <li class="divider">li>
        <li id="sytemExit">
            <a href="#" ng-click="systemClose()">关闭窗口a>
        li>
    ul>
li>

angularjs的代码:
var apiGatewayCtrls = angular.module('apiGatewayCtrls', ['ionic']);
apiGatewayCtrls.controller('screen',function ($scope,$window) {
    $scope.fullScreen = function () {
        var viewFullScreen = document.getElementById("view-fullscreen");
        if (viewFullScreen) {
            viewFullScreen.addEventListener("click", function () {
                var docElm = document.documentElement;
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen();
                }
                else if (docElm.msRequestFullscreen) {
                    docElm = document.body; //overwrite the element (for IE)
                    docElm.msRequestFullscreen();
                }
                else if (docElm.mozRequestFullScreen) {
                    docElm.mozRequestFullScreen();
                }
                else if (docElm.webkitRequestFullScreen) {
                    docElm.webkitRequestFullScreen();
                }
            }, false);
        }
    }
    $scope.exitScreen = function () {
        var cancelFullScreen = document.getElementById("cancel-fullscreen");
        if (cancelFullScreen) {
            cancelFullScreen.addEventListener("click", function () {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
                else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
                else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                }
                else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
            }, false);
        }
    }
    $scope.systemClose = function () {
        var sytemExit = document.getElementById("sytemExit");
        if (sytemExit) {
            sytemExit.addEventListener("click", function () {
                if (confirm("您确定要关闭本系统吗?")) {
                    $window.close();
                }
                else {
                }
            })
        }
    }
});
 
  
效果图片:
 
  
 
 

你可能感兴趣的:(angular,JS)