Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Window orientationchange event in Angular

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);
like image 697
tdhulster Avatar asked Apr 10 '14 14:04

tdhulster


3 Answers

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

});
like image 143
user1325394 Avatar answered Oct 22 '22 10:10

user1325394


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});
            });

        }
    };
}]);
like image 39
Nick Taras Avatar answered Oct 22 '22 08:10

Nick Taras


I implemented it this way:

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

What do you think?

Comments are welcome.

like image 4
fmquaglia Avatar answered Oct 22 '22 08:10

fmquaglia