2014-04-21 2 views
0

Dans mon contrôleur principal, j'ai une fonction qui permet de basculer vrai/faux pour un état du navigateur plein écran comme ceci:angulaire et HTML5 plein écran API

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

Et dans la vue ...

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

Cela fonctionne très bien, sauf lorsque je navigue vers une autre page du SPA. Chaque fois que je fais une sélection à partir de la navigation principale (qui est également dans le même contrôleur), la page saute hors du plein écran. Une idée de ce que fait Angular.js ou de ce qui peut être fait pour maintenir l'état entre les changements de route?

Répondre

0

Vous supprimez probablement l'élément plein écran et le lisez. Il devrait être au-dessus de votre ui-vue, quelque chose comme

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

Vous pouvez également utiliser ce projet pour éviter d'avoir à appeler des fonctions spécifiques fournisseur https://github.com/hrajchert/angular-screenfull

Questions connexes