How to hide some element on screen resize in angularjs

Question

I am new in angularjs. I searched a lot to hide some html element on body resize but did't work. here is my controller 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;
        }
  });

});

and here where i use ng-show

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

you have to manually trigger the digest cycle using $apply() . — Anurag
– Anurag, Commented Aug 3, 2017 at 13:34

Mistalis · Accepted Answer · 2017-08-03 13:36:32Z

3

If you want to achieve this using AngularJS, you need to relaunch the digest cycle using $scope.$apply().

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

});

Anyway, I think a cleaner way to do that is using CSS media queries:

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

answered Aug 3, 2017 at 13:36

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Abdullah Over a year ago

i read somewhere that in angularjs the element is permanently hide but in media queries its just not visible but remain there. so the best way is to use angularjs .

Muhammad Abdullah Over a year ago

but thanks for the answer. It worked. i waste half of my day on it. and the solution is only of 1 line.

Anurag · Accepted Answer · 2017-08-03 13:37:36Z

You have to manually trigger the digest cycle using $apply() function , since what you are doing is out of angular context.Try the below 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()

    } });});

Gaurav Srivastava · Accepted Answer · 2017-08-03 13:39:47Z

You have to apply the scope changes by calling $scope.$apply().:-

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>

Collectives™ on Stack Overflow

How to hide some element on screen resize in angularjs

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related