Angular和HTML5全屏API

Question

In my main controller, I've got a function that toggles true/false for a fullscreen browser state like so: 在我的主控制器中，我有一个函数可以针对全屏浏览器状态切换true / false，如下所示：

// Full Screen toggle
$scope.fsState = false;
$scope.fullScreen = function fullScreen(){
  function launchFS(element) {
    if (element.requestFullScreen) element.requestFullScreen();
    else if (element.mozRequestFullScreen) element.mozRequestFullScreen();
    else if (element.webkitRequestFullScreen) element.webkitRequestFullScreen();
  }
  function cancelFS() {
    if (document.cancelFullScreen) document.cancelFullScreen();
    else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
    else if (document.webkitCancelFullScreen) document.webkitCancelFullScreen();
  }
  if($scope.fsState == false) launchFS(document.documentElement);
  else cancelFS(); $scope.fsState = !$scope.fsState;
};

And in the view... 在视图中...

<button class="btn" ng-click="fullScreen()">Toggle Fullscreen</button>

This works fine, except for when i navigate to another page within the SPA. 除了我导航到SPA中的另一页时，此方法工作正常。 Every time i make a selection from the main navigation (which is also in the same controller), the page jumps out of fullscreen. 每当我从主导航（也是在同一控制器中）中进行选择时，页面就会跳出全屏。 Any idea why Angular.js is doing this or what can be done so it maintains the state between route changes? 知道为什么Angular.js会这样做还是可以做什么以保持路由更改之间的状态？

Answer 1

You are probably removing the fullscreen element and readding it. 您可能正在删除全屏元素并将其读取。 It should be on top of your ui-view, something like 它应该在用户界面视图的顶部，类似

<body>
  <div class="fullscreen-container">
    <div ui-view></div>
  </div>
</body>

You can also use this project to avoid having to call vendor specific functions https://github.com/hrajchert/angular-screenfull 您也可以使用该项目来避免调用特定于供应商的功能https://github.com/hrajchert/angular-screenfull

Angular和HTML5全屏API

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-03-30 15:26:19

Angular和HTML5全屏API

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-03-30 15:26:19

解决方案1
0 已采纳 2015-03-30 15:26:19