2014-04-09 4 views
0

전체 화면 API를 사용하여 DOM 요소를 전체 화면 모드로 전환하는 데 버튼을 사용하고 있습니다. 이 부분은 예상대로 작동합니다. 문제는 내가 전체 화면 모드를 종료 할 때 전체 화면 변경 이벤트를 수신하고 dom 요소의 크기를 조정해야한다는 것입니다. 여기에 내가 현재 시도하고 무엇을 :angularJs의 fulscreenChange 이벤트 수신

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

내가 크기 조정 DIV 기능에 대한 논리를 포함하지 않았다하지만이 작업을 수행합니다. 내 문제는 fullScreenToggle()을 호출 할 때 특히 elem.requestFullscreen()을 사용하면 전체 화면 변경 이벤트가 발생하는 것을 기대할 수 있습니다. 그러나 그 중 하나가 아니면 ... 제대로 듣지 못하는 것입니다.

+0

'isFullscreen'이라는 var을 선언하고 처음에는'false'와 동일하게 선언하십시오. 'fullscreenchange' 이벤트에서'isFullscreen =! isFullscreen; '과 같은 값을 변경하십시오. 이제 var를 검사하여 전체 화면인지 확인하십시오. – Ronnie

+0

내 문제가 전체 화면에 너무 많이 들어가 있지 않은 것 같아요. 그 이벤트에 귀를 기울여서 전체 화면을 나갈 때 DIV 요소의 크기를 적절하게 조절할 수 있도록 해주세요. – Deslyxia

+0

아, 알겠습니다. 제이슨은 바로 그 때입니다. '$ on'은'$ broadcast'에서 발생한 각도 이벤트를 수신합니다. – Ronnie

답변

0

$scope.$on은 각도 이벤트를 수신하므로 전체 화면을 요청하는 요소에서 fullscreenchange 이벤트를 관찰해야합니다.

+0

각도 조절기에서 다음과 같이하십시오 : document.addEventListener ("fullscreenchange", function() {}; 또는 내 템플릿에 해당 수신기를 넣고 각도 컨트롤러에서 함수를 호출해야합니까? – Deslyxia

+0

당신이 컨트롤러에 들어 줄 수있는 $ rootScope에 이벤트를 브로드 캐스팅 할 지시문을 만들 수 있습니다. 지시어는 브라우저의 고유성을 처리 할 수 ​​있으며 이벤트에 대한 전체 화면 변경 이름 만 제공 할 수 있습니다 . –

0

fullscreenchange 이벤트를 수신하려면 컨트롤러가 아닌 지시문에서 수행해야합니다.

나는 angular-screenfull

는 희망이 도움이 각도 방법으로이 문제를 래핑 라이브러리를 만들었어요!