Angular and HTML5 fullscreen API
Question
In my main controller, I've got a function that toggles true/false for a fullscreen browser state like so:
// 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. 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?
1 answers
solution1
0 ACCPTED 2015-03-30 15:26:19
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.