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

How to add a class depending on screen dimensions with AngularJS

本文关键字：添加 屏幕 何使用 AngularJS      更新时间：2023-09-26

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

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

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

您可以为此目的创建指令，如下所示，但使用 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>

可能

不是最佳做法，但您可以编写一个函数，该函数采用屏幕大小然后应用该类

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

也可以直接做JavaScript或JQuery

相关文章：