AngularJS : 화면 크기 조정을위한 CSS 미디어 쿼리 사용

Question

기존 CSS이 있는데, 미디어 쿼리를 수행하고 화면 크기가 특정 크기로 조정되면 메시지 상자를 표시합니다. 메시지 상자가 5 초 후에 사라지 길 원합니다.

AngluarJs에서 어떻게 할 수 있습니까?

CSS :

@media all and (max-width: 1024px), all and (max-height: 760px) { 
    div#bestview { 
    display: block; 
    position:fixed; 
    z-index: 9999; /* above everything else */ 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
    background-image: url(../img/transpBlack75.png); 
    } 
} 

HTML :

<div id="bestview">The selected browser size is not optimal for.....</div> 

Answer 1

당신은이 작업을 수행 할 수 있습니다

// make a directive in your app : 

    youApp.directive('hideme',function(){ 
     return{ 
      restrict:'A', 
      link:function(scope,elem,att){ 
      var timeout = att.hideme*1; // *1 to convert it to integer:(
      setTimeout(function(){ 
       elem.addClass('hidden'); 
       },timeout); 
      } 
     } 
    }); 

    // in your css : 

     .hidden{ 
     display:none 
    } 

    // in your html: 

    <div hideme="5000" id="bestview">The selected browser size is not optimal for.....</div> 

Answer 2

내가 xe4me에 의해 주어진 대답에서이 약간 다른했다. 난 내가 아직도 내가 여기에 무슨 짓을 게시 할 예정입니다 생각 :

CSS :

@media all and (max-width: 1024px), 
     all and (max-height: 760px) { 
    div#bestview { 
     display: block; 
     position: fixed; 
     z-index: 9999; /* above everything else */ 
     top: 0; 
     left: 0; 
     bottom: 0; 
     right: 0; 
     background-image: url(../img/transpBlack75.png); 
    } 
    } 

AngularJS와 :

app.directive('bestView', function($timeout) { 
    return { 
    restrict: 'A', 
    link: function(scope, elem, attr, ctrl) { 
     scope.$watch(
     function() { 
      return elem.is(':visible'); 
     }, 
     function(newval) { 
      if(newval == true) { 
      $timeout(function() { 
       elem.remove(); 
      }, 5000); //disappear after 5 seconds 
      } 
     } 
    ); 
    } 
    }; 
}); 

HTML :

<div id="bestview" best-view>The selected browser size is not optimal for.....</div>