0

I'm working on an angular-app and am trying to implement orientation change with matchmedia. When I first load my page I run a line of code in my controller to check wheter if i'm in landscape or not:

$scope.landscape = matchmedia.isLandscape();

This works fine. But then when I want to detect a change of orientation I use this code:

angular.element($window).bind('orientationchange', function () {
    $route.reload();
});

So when the orientation changes the page gets reloaded and it will again detect the orientation. But now it gives back the opposite. So it says landscape == false when it should be true. Does anybody know why this is? Or am I using a wrong technique to deal with the orientation change? Thanks in advance!

Maarten Meeusen
  • 482
  • 1
  • 9
  • 23

2 Answers2

0

Try:)

screen.bind('orientationchange', function () {
    $route.reload();
});
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • Should I inject screen or what should I do with this? When I use it like this the controller doesn't work anymore.. When I don't inject I get an error of unexisting and when I inject it I get injector errors.. – Maarten Meeusen Jan 12 '15 at 13:07
0

You could try:

angular.element($window).bind('resize orientationchange', function (e) {
    console.log('resize or orientationchange: ' + e.type);
    $route.reload();
});

In Browser Simulator I get "resize" when orientation changes. But on device I get "orientationchange".

Here's an example I found online. It's not working on desktop's chrome but it's working on device's chrome:

http://codepen.io/xAlien95/pen/EaNVNW

user4193897
  • 1
  • 1