获取指示当前@media类型的javascript变量

Question

我正在使用Bootstrap和Angular。

我目前有一个ng-repeat，它是这样设置的：

<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)。基于bootstrap的12列宽度。clearfix用于重置行，它仅在适当的屏幕大小下可见，ng-if仅在索引与适当的行匹配时才将其添加到dom中。

根据介质类型(浏览器或打印机)，会添加额外的引导css。这是因为bootstrap将所有打印机屏幕大小视为X。我希望打印时每行3个项目(而不是2个)。为此，我在打印时隐藏了响应指令，并显示了一个仅定义了col-xs-4的指令。在打印时，我还隐藏了原始的xs clearfix，并显示了一个合适的col xs-4。

所有这些都在工作，但问题是这些引导媒体css类是隐藏/显示的。这意味着在幕后，隐藏了大量额外的DOM垃圾。

让我明白我的意思。现在我对隐藏的屏幕大小的修复没什么问题，但是我想使用ng-if而不是hidden print/size print类来避免将指令两次写入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;           

该参数是任何有效的媒体查询表达式。

Answer 2

您可以直接从window.styleMedia.type获取它

Answer 3

我在我正在做的一个Angular项目中做了类似的事情。事实证明，它工作得很好。我能够根据当前的引导大小显示/隐藏某些指令和标记。

我确信它可以得到增强，以支持打印/屏幕媒体类。

这是我已经准备好的核心内容，您可以根据需要进行修改。

在我的标记中，我添加了四个元素，这样我就可以用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工厂中，我创建了一个函数来监视大小，计算出Bootstrap大小，并将其存储起来以供使用/检索：

(请注意，此代码还将lodash库用于去抖动、forEach和其他有用的实用程序)

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;

}]);