0

I was trying to make my application to work only in landscape mode, I have to display a text something like "Please use landscape mode" if the user is in portrait mode and all in AngularJS. I tried it in jQuery and it was perfectly working but we are not using jQuery, so i have to use AngularJS for the same.

Here is my simple controller:

app.controller('rootCtrl', ['$scope', '$http', function ($scope, $http) {
    window.addEventListener("orientationchange", function() {
        if(window.orientation == 0) {
            // alert(window.orientation) : I get this value when rotate my device
            $scope.islandscape = false;
        }else {
             // alert(window.orientation) : I get this value when rotate my device
             $scope.islandscape = true;
    }           
}, false);

}]);

Here is what I have in my view:

<div id="p" ng-show="islandscape == false">
    <h1 style="width: 90%; margin: 2em auto; font-size: 4em;">Please Use Landscape Mode</h1>
</div>

<div id="l" ng-show="islandscape == true">
    <div ng-include="'templates/header.htm'"></div>
    <div id="dataContent" ng-view></div>
    <div ng-include="'templates/footer.htm'"></div>
</div>

The following is the working code in jQuery but I can not use jQuery

$(document).ready(function() {
    readDeviceOrientation();
});

function readDeviceOrientation() {

    if (Math.abs(window.orientation) === 90) {
        $("#p").hide();
        $("#l").show();
    } else {
      $("#l").hide();
        $("#p").show();
    }
}

window.onorientationchange = readDeviceOrientation;

I am new to AngularJS and not sure what I have missed here or may be my logic is not correct. How can I get this working?

jeewan
  • 1,597
  • 5
  • 23
  • 40
  • Instead of using `addEventListener`, use angular event handling (with `$scope.apply`) - `angular(window).on("orientationchange", function () { $scope.apply(function () { /* CODE */ }); });` – Ian Jun 06 '14 at 16:48
  • @lan : I tried it, but did not work. – jeewan Jun 06 '14 at 17:02

0 Answers0