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
– Starscream1984, Commented Nov 18, 2015 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
– germainelol, Commented Nov 18, 2015 at 17:18
@VVK Im using bootstrap yep, and ui.bootstrap too on the angular side of things — germainelol
– germainelol, Commented Nov 18, 2015 at 17:24

Zohaib Ijaz · Accepted Answer · 2015-11-18 17:17:51Z

1

maybe you can do something like

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

answered Nov 18, 2015 at 17:17

Zohaib Ijaz

23k7 gold badges42 silver badges63 bronze badges

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

1 Comment

sirrocco Over a year ago

it needs to be in a directive .. that's the angular way

Vivek · Accepted Answer · 2015-11-18 17:36:10Z

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, 2015 at 17:36

Vivek

13.6k19 gold badges101 silver badges139 bronze badges

5 Comments

germainelol Over a year ago

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.

Vivek Over a year ago

Why do you want to shrink it instead of hiding. Whats the advantage.

germainelol Over a year ago

It's not your typical sidebar, the purpose isn't that important really :P

Luiz Mitidiero Over a year ago

bootstrap doesn't help for all resolutions. Sometimes you need to put some custom css class

Vishal Kumar Sahu Over a year ago

I guess he knows about this and the OP is about angular not BS>

Community · Accepted Answer · 2017-05-23 11:51:53Z

0

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

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Nov 18, 2015 at 18:14

sirrocco

8,0294 gold badges63 silver badges83 bronze badges

Comments

Luiz Mitidiero · Accepted Answer · 2015-11-18 18:29:14Z

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
haha no problem. We can remove jquery and use vanillajs on the directive. 1 min.

Collectives™ on Stack Overflow

Change $scope variable based on screen size

4 Answers 4

1 Comment

5 Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

Comments

2 Comments

Linked

Related