So fügen Sie eine Klasse je nach Bildschirm-Abmessungen mit AngularJS

Wie kann ich eine Klasse für ein element, abhängig von der aktuellen Bildschirm-Dimensionen?

Nun, ich verwende Bootstrap ist hidden-xs und visible-xs es zu handhaben, aber dies erfordert duplizierten code und-Elemente in den DOM.

Update:
Überschreiben von Bootstrap ist predifined-Klassen ist keine option für mich. Korrigieren Sie mich, wenn ich falsch Liege, aber das wäre nur ein hack und ist schlecht üben, in meiner Sicht.

Warum müssen Sie duplizierten code und Elemente ? Wenn Sie nur wollen, um eine Klasse, warum tun Sie das nicht und nennen es mit mediaqueries?
würden Sie vorschlagen, um so etwas wie window.screen.availWidth oder gibt es eine "Winkel-Weg" zu umgehen?
Ich schlage vor, Sie nicht brauchen, Winkel bei allen ... nur die Verwendung von CSS-mediaqueries
Hier ist ein Beispiel für das, was Sie brauchen: w3schools.com/cssref/css3_pr_mediaquery.asp
könnten Sie mir ein Beispiel nennen? Ich brauche die Klasse navbar-fixed-top für kleine screensizes und navbar-static-top für größere. Wie kann ich das erreichen?
Dies überprüfen, nutzen Sie einfach die Eigenschaften, um es fest bootply.com/YrBuu6uTXq
Verwenden Sie die gleiche Klasse (navbar-fixed) mit mediaqueries, zu verändern, was Sie brauchen, auf Ihrer Maße. @media (max-width:800px and min-width:500px) { .navbar-fixed: width: 20%; } @media (max-width: 1200px and min-width:801px) { .navbar-fixed: width: 40%; }
Ich eigentlich nicht überschreiben wollen Bootstrap-Klassen, wie Sie machen einen guten job. Ich möchte nur verwenden Sie Sie entsprechend. Ich denke, es ist nicht eine gute Praxis zu überschreiben, bootstrap, ist es?
Ich denke, Sie sind Missverständnis, wie die Klassen und mediaqueries arbeiten. Schauen Sie nochmal in die Beispiele von Bootstrap. Der springende Punkt ist, dass Sie nicht brauchen, um bedingt gelten diese Klassen
Noch einmal: Ist es nicht als schlechte Praxis zu überschreiben Bootstrap-Klassen in Anbetracht der kommenden Versionen von Bootstrap? Im moment bin ich die Lösung meines Problems, indem Sie die folgende Funktion: $scope.isScreenXS = function () { return window.screen.availWidth < 480; };

InformationsquelleAutor FranBran | 2015-01-26

Können Sie erstellen, die Richtlinie, die für diesen Zweck wie unten, aber mit CSS media queries scheint zu sein, die bessere Lösung.

Finden Sie hier auch http://jsbin.com/mukec/1/edit?html,css,js,output

JS:

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')


        }
      }


    }


  }

})

CSS:

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

HTML:

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

InformationsquelleAutor sylwester

-1

Kann nicht best practice, aber man könnte eine Funktion schreiben, die nimmt die Bildschirmgröße, dann gilt die Klasse

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

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