Window orientationchange event in Angular

Question

Is there a way to call the orientationchange event inside an AngularJS directive?

I'm currently working with angular-masonry and I'm trying to update/refresh masonry when the orientation of the mobile device changes.

I've found this but I'm wondering how to do this with the $window service inside Angular

window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
  console.log(window.orientation);
}, false);

score 32 · Accepted Answer · edited Jul 25 '14 at 06:22

32

angular.element($window).bind('orientationchange', function () {

});

edited Jul 25 '14 at 06:22

Matanya

6,233
9
47
80

answered Jun 06 '14 at 10:57

user1325394

561
5
7

1

Thx, easier than I thought! – tdhulster Jun 06 '14 at 11:02
3

Ofc don't forget to inject $window in your controller ! – amdev Oct 03 '16 at 09:06
But there is something very strange, 'orientationchange" is fire before the screen width change ... So if I execute something just after 'orientationchange' and try to get the new width it doesn't work, give me the old one. – amdev Oct 03 '16 at 09:37
Don't forget to add $scope.$apply(); – Weihui Guo Sep 13 '17 at 18:13

score 6 · Answer 2 · answered Feb 19 '15 at 00:48

Hope this helps. Attach directive as attr, to body. Tested with IPhone 5.

'use strict';

angular.module('appModuleNameHere')
    .directive('DirPrefixNameOrientationChange', ['$rootScope',function ($state) {
    return {
        restrict: 'A',
        replace: true,
        link: function postLink($scope, element, attrs) {

            element.bind('orientationchange', function () {
                $state.go($state.current, {}, {reload: true});
            });

        }
    };
}]);

This solution helped me in my map directive. Thx =D – Aderbal Nunes Jul 02 '15 at 14:44 — Aderbal Nunes, Jul 02 '15 at 14:44

score 4 · Answer 3 · answered Jan 30 '15 at 12:09

4

I implemented it this way:

$window.addEventListener('orientationchange', function() {
  your code here
}, false);

What do you think?

Comments are welcome.

answered Jan 30 '15 at 12:09

fmquaglia

407
2
11
20

Window orientationchange event in Angular

3 Answers3