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, Aug 03 '17 at 13:34

score 3 · Accepted Answer · answered Aug 03 '17 at 13:36

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 03 '17 at 13:36

Mistalis

17,793
13
73
97

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 Aug 03 '17 at 13:46
but thanks for the answer. It worked. i waste half of my day on it. and the solution is only of 1 line. – Muhammad Abdullah Aug 03 '17 at 13:47

score 0 · Answer 2 · answered Aug 03 '17 at 13:37

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

    } });});

score 0 · Answer 3 · answered Aug 03 '17 at 13:39

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>

How to hide some element on screen resize in angularjs

3 Answers3