現在の@mediaタイプを示すjavascript変数を取得します

Question

私はブートストラップと角度を使用しています。

私は現在セットアップされ、このようにngのリピートを持っている：

<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. 

これは、実際に働いています。

画面のサイズによって、行には6個のアイテム（lg-2）、4個のアイテム（md-3）、3個のアイテム（sm-4）、または2個のアイテムが含まれています。 （xs-6）である。ブートストラップの12カラム幅に基づいています。 clearfixは行をリセットするために働き、適切な画面サイズでのみ表示され、ng-ifはインデックスが適切な行と一致するときにng-ifをdomに追加します。

メディアタイプ（ブラウザまたはプリンタ）によっては、追加のブートストラップCSSが追加されます。これは、ブートストラップがすべてのプリンタ画面サイズをxsとして扱うためです。印刷するときに1行につき3つのアイテムが必要です（2の代わりに）。これを達成するために、私は印刷時に応答指令を隠し、col-xs-4だけを定義した指令を表示します。また、印刷時に元のxs clearfixを隠し、col-xs-4に適切なものを表示します。

これらはすべて動作していますが、問題はこれらのブートストラップメディアのCSSクラスが非表示になっていることです。シーンの背後には、隠されている余分なDOMゴミがかなり多くあります。

私の所在地を知りたい。私は今、隠された画面サイズのclearfixesでうまくいますが、hidden-print/visible-printクラスの代わりにng-ifを使用して、DOMにディレクティブを2度書き込まないようにしたいと考えています。

基本的に現在のメディアタイプ（プリンタ/ブラウザ）を表す変数を取得する最も良い方法は何ですか？可能ならば<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> 

次に、角度の工場では、私はサイズ変更のために見て機能を作成し、ブートストラップを考え出し：私は角度でそれらを「見る」ことができるように私のマークアップで

は、私は4つの要素が追加しました

が

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; 

}]);