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

根据介质类型（浏览器或打印机），添加了额外的bootstrap css。这是因为bootstrap将所有打印机屏幕大小视为xs。打印时我想要每行3个项目（而不是2个）。为了实现这一点，我在打印时隐藏了响应指令，并显示了仅定义了col-xs-4的指令。我还在打印时隐藏了原始的xs clearfix，并使用col-xs-4显示了一个。

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

绕过我的观点。我现在很好用隐藏的屏幕大小的clearfixes，但是我想使用ng-if而不是hidden-print / visible-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;

param是任何有效的媒体查询表达式。

Answer 2

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

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

这是我所拥有的核心，您可以根据需要进行修改。

在我的标记中，我添加了四个元素，以便我可以用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;

}]);

Answer 3

您可以直接从window.styleMedia.type

获取它

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

3 个答案: