如何使用AngularJS根据屏幕尺寸添加类答案

【问题标题】：How to add a class depending on screen dimensions with AngularJS如何使用AngularJS根据屏幕尺寸添加类
【发布时间】：2015-01-27 15:19:45
【问题描述】：

如何根据当前屏幕尺寸为元素添加类？

现在我使用 Bootstrap 的 hidden-xs 和 visible-xs 来处理它，但这需要 DOM 中的重复代码和元素。

更新： 覆盖 Bootstrap 的预定义类对我来说不是一个选择。如果我错了，请纠正我，但这只是一个 hack，在我看来是不好的做法。

【问题讨论】：

为什么需要重复的代码和元素？如果您只想添加一个类，为什么不这样做并使用媒体查询调用它？
您会建议使用window.screen.availWidth 之类的东西还是有一些“角度方式”来处理它？
我建议你根本不需要 Angular ... 只需使用媒体查询 CSS
勾选此项只需使用属性使其固定bootply.com/YrBuu6uTXq
使用与媒体查询相同的类 (navbar-fixed)，更改您对维度的需求。 @media (max-width:800px and min-width:500px) { .navbar-fixed: width: 20%; } @media (max-width: 1200px and min-width:801px) { .navbar-fixed: width: 40%; }

标签： javascript css angularjs twitter-bootstrap

【解决方案1】：

您可以为此目的创建指令，如下所示，但使用 CSS 媒体查询似乎是更好的解决方案。

也请看这里http://jsbin.com/mukec/1/edit?html,css,js,output

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {




});

app.directive('top', function($window) {


  return {

    restrict: 'AE',
    link: function(s, e, a) {
      var body = angular.element(document.getElementsByTagName("body"));


      $window.onresize = function(event) {
        var clientWidth = document.documentElement.clientWidth;


        if (clientWidth < 768)

        {
          e.removeClass('navbar-default')
          e.addClass('navbar-fixed-top')
          body.addClass('top50')
        } else {
          e.removeClass('navbar-fixed-top');
          e.addClass('navbar-default');
          body.removeClass('top50')


        }
      }


    }


  }

})

.navbar-fixed-top {
  background-color: red
}
.navbar-default {
  background-color: green
}
.top50 {
  padding-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<body ng-app="app">
  <div class="navbar" top>
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">More</a>
        </li>
        <li><a href="#">Options</a>
        </li>
      </ul>
    </div>
  </div>
  <h1>SCROLL CONTENT</h1>
  <img src="" height="1500px" />
</body>

【讨论】：

【解决方案2】：

可能不是最佳实践，但您可以编写一个获取屏幕大小然后应用类的函数

function screenLayout() {
   var clientWidth = document.documentElement.clientWidth;
}

var classtoadd = angular.element('navbar');
if (clientWidth > 1024) {
 classtoadd.addClass('largeScreen')
} else {
 classtoadd.addClass('otherScreen')
}

也可以直接用 javascript 或 JQuery 来做

【讨论】：

这不适用于 AngularJS！