Wie verberge ich ein Element auf dem Bildschirm Größe ändern in angularjs

Ich bin neu in angularjs. Ich suchte viel, um irgendein HTML-Element auf Körpergröße zu verstecken, aber arbeitete nicht. Hier ist mein Controller-Code.Wie verberge ich ein Element auf dem Bildschirm Größe ändern in angularjs

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

    app.controller ('studentController',function($scope, $window) { 

    var appWindow = angular.element($window); 

    appWindow.bind('resize', function() { 
     if($window.innerWidth < 600){ 
      alert("hello"); 
      $scope.ohh = true; 
     } 
    }); 

});

und hier, wo ich ng-Show

<div id="sidebar-wrapper" ng-show="ohh">

Quelle

2017-08-03 Muhammad Abdullah

Sie müssen manuell den Digest-Zyklus auslösen $ mit sich bewerben() . – talentedandrew

Wenn Sie dies mit AngularJS erreichen wollen verwenden, müssen Sie die digest cycle mit $scope.$apply() wiederzubeleben.

appWindow.bind('resize', function() { 
    if($window.innerWidth < 600){ 
     $scope.ohh = true; 
     $scope.$apply(); 
    }

});

Wie dem auch sei, ich denke, eine sauberere Möglichkeit, das zu tun CSS verwendet media queries:

@media only screen and (max-width: 599px) { 
    #sidebar-wrapper { 
     display: none; 
    } 
}

Quelle

2017-08-03 13:36:32 Mistalis

ich lese irgendwo, dass in angularjs das element permanent versteckt ist aber in medienabfragen ist es einfach nicht sichtbar aber dort bleiben. Der beste Weg ist also angularjs. –

aber danke für die Antwort. Es funktionierte. Ich verschwende die Hälfte meines Tages darauf. und die Lösung besteht nur aus 1 Zeile. –

Sie müssen manuell den Digest-Zyklus auslösen mit $ apply() Funktion, da das, was Sie tun, aus eckig context.Try den folgenden Code.

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

app.controller ('studentController',function($scope, $window) { 

var appWindow = angular.element($window); 

appWindow.bind('resize', function() { 
    if($window.innerWidth < 600){ 
     alert("hello"); 
     $scope.ohh = true; 
     $scope.$apply() 

    } });});

Quelle

2017-08-03 13:37:36 talentedandrew

Sie haben durch den Aufruf $ Umfang Der Umfang Änderungen anzuwenden gelten $(): -..

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope, $window) { 
 

 
    var appWindow = angular.element($window); 
 
    $scope.ctrl = {}; 
 
    $scope.ctrl.ohh = false; 
 
    appWindow.bind('resize', function() { 
 
    console.log($window.innerWidth); 
 
    if ($window.innerWidth < 600) { 
 
     $scope.ctrl.ohh = true; 
 
     $scope.$apply() 
 
    } 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 

 
<body> 
 

 
    <div ng-app="myApp" ng-controller="myCtrl"> 
 
    <h1>THis is main content</h1><br> 
 
    <div id="sidebar-wrapper" ng-show="ctrl.ohh">This is shown after window width is less than 600 
 
    </div> 
 
    </div>

Quelle

2017-08-03 13:39:47

Wie verberge ich ein Element auf dem Bildschirm Größe ändern in angularjs

Antwort

Verwandte Themen