Change $scope variable based on screen size

Question

I have a sidebar which I collapse based on a value in $scope (let's say $scope.open for easy understanding). At the moment, when you click on the close/open button it just toggles that value, but if the menu is open it's going to look really ugly on mobile devices or small windows. So, I want to close the menu (set $scope.open to false) if the user is on a mobile sized device or using a small screen. Normally in CSS I would just use @media... and create a media query to add some styles on mobile devices, but in this case I want to do something similar but with a $scope variable.

Basically I want to do the equivalent of a media query but with my $scope.open variable to make sure the menu minimizes when on mobile. Any ideas?

using the $window service you could set up a resize event handler - if the size is below your breakpoint, set the scope variable? — Starscream1984, Nov 18 '15 at 17:18
@Starscream1984 I will take a look, I wasn't sure how to do that within angular so was seeing what I could find here — germainelol, Nov 18 '15 at 17:18
@VVK Im using bootstrap yep, and ui.bootstrap too on the angular side of things — germainelol, Nov 18 '15 at 17:24
I don't think it's necessary, it's just a simple toggle. Something like `ng-class="{'closed': !open}"` on the sidebar element and in `.closed` I set the css styles for the sidebar. — germainelol, Nov 18 '15 at 17:43

score 1 · Answer 1 · answered Nov 18 '15 at 17:17

1

maybe you can do something like

$scope.open = $(document).height() > 500; // can be different

answered Nov 18 '15 at 17:17

Zohaib Ijaz

21,926
7
38
60

it needs to be in a directive .. that's the angular way – sirrocco Nov 18 '15 at 18:14

Luiz Mitidiero · Answer 2 · 2015-11-18T18:29:14.247

May be a good idea create a directive to access dom using jQuery:

.directive('onloadDirective', function(){
return {
   restrict: 'A',
   scope: {
      open: '='
   }
   link: function(scope, elem, attrs){
       $(window).load(function() {
           //get element
           var myElement = $("#myElement");
           if (myElement.width() > 100 && myElement.height() < 200) {
               scope.open = true;
           } else {
               scope.open = false;
           }
       });
   }

} });

Solution with vanilla js and angular

    .directive('onloadDirective', function(){
return {
   restrict: 'A',
   scope: {
      open: '='
   }
   link: function(scope, elem, attrs){
       window.onload = function() {
           //get width
           var w = window.innerWidth;
           if (w > 100 && w < 200) {
               scope.open = true;
           } else {
               scope.open = false;
           }
       });
   }

} });

and your HTML can be like this:

<body ng-controller="myController" onload-directive open="open">
</body>

I like the logic of the directive, but I'd reaaally want to use native JS or a pure angular solution. I really don't want to use jQuery to solve this just because it's easier :P — germainelol, Nov 18 '15 at 17:26
haha no problem. We can remove jquery and use vanillajs on the directive. 1 min. — Luiz Mitidiero, Nov 18 '15 at 18:26

score 0 · Answer 3 · answered Nov 18 '15 at 17:36

0

If you are using bootstrap, Then the right way would be to add hidden-xs and hidden-sm class to your sidebar div.

This will hide the sidebar on mobile devices, While it will still be visible on all the devices having screen resolution ≥992px. So it doesn't look bad on them.

answered Nov 18 '15 at 17:36

Vivek

11,938
19
92
127

I don't want to hide it. When I set `$scope.open` to `false`, it basically changes the width of the sidebar and the main section, which shrinks the sidebar but doesn't hide it. – germainelol Nov 18 '15 at 17:37
Why do you want to shrink it instead of hiding. Whats the advantage. – Vivek Nov 18 '15 at 17:39
It's not your typical sidebar, the purpose isn't that important really :P – germainelol Nov 18 '15 at 17:41
bootstrap doesn't help for all resolutions. Sometimes you need to put some custom css class – Luiz Mitidiero Nov 18 '15 at 18:34
I guess he knows about this and the OP is about angular not BS> – Vishal Kumar Sahu Nov 01 '17 at 17:50

score 0 · Answer 4 · edited May 23 '17 at 11:51

Building on Luiz's answer, you can create a directive

.directive('onloadDirective', function($window){
return {
   restrict: 'A',
   scope: {
      open: '='
   }
   link: function(scope, elem, attrs){
      if ($window.innerWidth < 200) {
          scope.open = true;
      }
   }
  }  
});

Add the directive to the body tag or your ui-view, bind to your scope variable (don't put primitive values on the scope - What are the nuances of scope prototypal / prototypical inheritance in AngularJS? )

Change $scope variable based on screen size

4 Answers4