Question

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

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

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

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

Answer 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根据屏幕尺寸添加类

2 个答案: