Handle orientation change event

ionic-v1
1

Hello,
anyone know how I can handle device orientation change event?
I’ve looked into this forum with no luck.

Thanks.

2

Hi, are you referring to constraining to portrait or landscape?

3

No exactly, I refer to detect when device orientation change from portrait to landscape or from landscape to portrait.

Something like this:

$scope.$on(‘$rootScope.orientation.change’, function () {
console.log(‘Device orientation changed!!!’)
});

4

Can you elaborate on what you are trying to achieve?

5

I have a tab bar with a lot of elements. To display it correctly, I’ve created a tab-items-limit that shows ‘X’ elements, depending of screen width. Additionally I’ve added one ‘more button’ to display following items when you click this.

EG:
In a device with 320px width, I show four tab-items:
image
( ‘More’ item shows next 3 tabs)

In a device with 420px width, I show five tab-items:
image
( ‘More’ item shows next 4 tabs)

I wanna dinamically change this number of showing items when device orientation change, because in landscape orientation, I can show six or seven elements like in this picture:
image
( ‘More’ item shows next 5 tabs)

If I can detect orientation change event, I can reload view and recalculate the number of items I must show. For example with a code like this:

$scope.$on(‘$rootScope.orientation.change’, function () {
console.log(‘Device orientation changed!!!’)
$scope.reload( );
});

PD: Sorry for my english and thanks for your interest.

6

Did you find a solution for your problem? What did you finally end up with? I am trying to do the same here. None of my events work in the browser, but window.addEventListener(‘orientationchange’) works on the mobile.