현재 @media 유형을 나타내는 javascript 변수를 가져옵니다

Question

부트 스트랩 및 각도를 사용하고 있습니다. 이 실제로 작동하고

<div class="row"> 
    <div ng-if="viewType == 'grid'"> 
     <div ng-repeat="product in filteredProducts | filter:search" > 
     <product-tile-view class="hidden-print col-lg-2 col-md-3 col-sm-4 col-xs-6" product="product" on-selected="deviceSelected(product)" on-compare="compare(product)"></product-tile-view> 
     <product-tile-view class="visible-print-block col-xs-4" product="product" on-selected="deviceSelected(product)" on-compare="compare(product)"></product-tile-view> 
     <div class="clearfix visible-lg" ng-if="($index + 1) % 6 == 0"></div> 
     <div class="clearfix visible-md" ng-if="($index + 1) % 4 == 0"></div> 
     <div class="clearfix visible-sm" ng-if="($index + 1) % 3 == 0"></div> 
     <div class="hidden-print clearfix visible-xs" ng-if="($index + 1) % 2 == 0"></div> 
     <div class="visible-print-inline clearfix visible-xs" ng-if="($index + 1) % 3 == 0"></div> 
     </div> 
...other unreleated code, divs are closed. 

:

나는 현재 설정되어이 같은 NG 반복 있습니다.

화면 크기에 따라 행에 6 개의 항목 (lg-2), 4 개의 항목 (md-3), 3 개의 항목 (sm-4) 또는 2 개의 항목이 포함되어 있습니다. (xs-6)이다. 부트 스트랩의 12 열 너비를 기준으로합니다. clearfix는 행을 재설정하기 위해 작동하며 적절한 화면 크기에서만 표시되며 ng-if는 인덱스가 해당 행과 일치 할 때 dom에 추가합니다.

미디어 유형 (브라우저 또는 프린터)에 따라 추가 부트 스트랩 css가 추가됩니다. 부트 스트랩은 모든 프린터 화면 크기를 xs로 취급하기 때문입니다. 인쇄 할 때 행 당 3 개의 항목을 원합니다 (2 대신). 이것을 달성하기 위해 인쇄 할 때 응답 지시문을 숨기고 col-xs-4 만 정의 된 지시문을 표시합니다. 나는 또한 인쇄 할 때 원본 xs clearfix를 숨기고 col-xs-4에 적절한 것을 보여줍니다.

이 모든 작업이 가능하지만 문제는 이러한 부트 스트랩 미디어 CSS 클래스가 숨기거나 표시된다는 것입니다. 즉, 숨겨진 DOM 쓰레기가 상당량 존재한다는 것을 의미합니다.

내 요점을 알려면. 지금은 숨겨진 화면 크기의 클리어 픽스를 사용하는 것이 좋지만 hidden-print/visible-print 클래스 대신 ng-if를 사용하여 DOM에 지시문을 두 번 쓰지 않습니다.

기본적으로 현재 미디어 유형 (프린터/브라우저)을 나타내는 변수를 얻는 가장 좋은 방법은 무엇입니까? 가능한 경우 <ng-if currentMediaType == 'print'>처럼 사용하고 싶습니다.

Answer 1

css로 원하는 것을 만들 수 없다면 window.matchMedia()을 사용하여 현재 미디어를 검색 할 수 있습니다. 예 :

var is_screen = window.matchMedia("screen").matches; //bool 
var is_tv = window.matchMedia("tv").matches;   

param은 유효한 미디어 쿼리 식입니다.

Answer 2

제가 작업 한 Angular 프로젝트에서 비슷한 것을했습니다. 그것은 꽤 잘 작동하는 것으로 판명되었습니다. 현재 부트 스트랩 크기에 따라 특정 지시문과 마크 업을 표시하거나 숨길 수있었습니다.

인쇄/화면 미디어 클래스를 지원하도록 향상 될 수 있다고 확신합니다.

여기에 내가 가지고있는 핵심 요소가 있으며 필요에 따라 수정할 수 있습니다. 내 마크 업에서

, 나는 내가 각도로를 "볼"수 있도록 네 가지 요소를 추가 :

<span class="device-xs visible-xs"></span> 
<span class="device-sm visible-sm"></span> 
<span class="device-md visible-md"></span> 
<span class="device-lg visible-lg"></span> 

그런 각도 공장에서, 내가 크기를 조절하기위한 감시 기능을 생성하고 부트 스트랩을 파악

이

angular.module('myApp.services').factory('utility', ['$route', '$window', '$filter', function ($route, $window, $filter) { 

    var factory = {}; 

    // Local store for current window width 
    factory.windowWidth = $window.innerWidth; 

    // Local store for current bootstrap size 
    factory.bootstrapSize = ''; 

    /** 
    * Determines which bootstrap kick size we are on (xs, md, etc) 
    * NOTE: Relies on the elements being placed on the template somewhere: 
    * .device-xs.visible-xs 
    * .device-sm.visible-sm 
    * .device-md.visible-md 
    * .device-lg.visible-lg 
    */ 
    factory.findKick = function() { 
    var kicks = ['xs', 'sm', 'md', 'lg']; 
    var newkick = ''; 
    _.forEach(kicks, function (size) { 
     var className = '.device-' + size; 
     if (factory.isVisible(className)) { 
     newkick = size; 
     factory.bootstrapSize = size; 
     return false; 
     } 
    }); 
    if (!newkick) { 
     // Do something to log/trap this situation 
    } 
    return factory.bootstrapSize; 
    }; 

    /** 
    * Determines if the passed in element is visible or not 
    * 
    * @param className 
    * @returns {boolean} 
    */ 
    factory.isVisible = function (className) { 
    return angular.element(className).is(':visible'); 
    }; 

    /** 
    * Watch for window resizes and executes a debounced function to set the window width 
    * 
    * @type {Function} 
    */ 
    var w = angular.element($window); 
    w.bind('resize', _.debounce(function() { 
    factory.windowWidth = $window.innerWidth; 
    factory.findKick(); 
    }, 250)); 

    // Trigger the bootstrap size immediately on load. 
    factory.findKick(); 

    return factory; 

}]);