Wie können Elemente abhängig von der Bildschirmausrichtung im ionischen Rahmen angezeigt/ausgeblendet werden?

Question

Ich verwende plain JS, um die Bildschirmausrichtung des Geräts zu erkennen, aber ich habe keine Ahnung, wie Elemente abhängig von der Ausrichtung angezeigt oder ausgeblendet werden. Grundsätzlich ist das gleiche wie bei Ionic V2: HideWhen

angular.module('starter', [ 
    'ionic', 
    'ngCordova', 
    .... 
]) 
.run(function($ionicPlatform, $rootScope, $state) { 

    $ionicPlatform.ready(function() { 

     ... 

     window.addEventListener('orientationchange', function() { 

      switch(window.orientation) { 
       case -90: case 90: 
        // landscape 
        // how to get this into the controllers scope? 
        break; 
       default: 
        // portrait 
        // how to get this into the controllers scope? 
        break; 
      } 
     }); 
    }); 
}); 

einen Auszug aus der Vorlage Das ist

<img class="cover" ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="orientation.landscape"> 
<img class="cover" ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="orientation.portrait"> 

Answer 1

Stellen Sie sicher, "bring it back to Angular land" mit $timeout, $apply, etc ...

angular.module('starter', [ 
    'ionic', 
    'ngCordova' 
]) 
    .factory('Orientation', function($ionicPlatform, $timeout){ 
     var ret = { 
      LANDSCAPE: 'LANDSCAPE', 
      PORTRAIT: 'PORTRAIT', 
      current: void 0 
     }; 

     function handleOrientation() { 
      var ua = navigator.userAgent.toLowerCase(); 
      var isAndroid = ua.indexOf("android") > -1; // Detect Android devices 
      if (isAndroid) { 
       //window.orientation is different for iOS and Android 
       if (window.orientation == 0 || window.orientation == 180) { //Landscape Mode 
        $timeout(function(){ 
         ret.current = ret.LANDSCAPE; 
        }) 
       } 
       else if (window.orientation == 90 || window.orientation == -90) { //Portrait Mode 
        $timeout(function(){ 
         ret.current = ret.PORTRAIT; 
        }) 
       } 
      } 
      else { 
       if (window.orientation == 90 || window.orientation == -90) { //Landscape Mode 
        $timeout(function(){ 
         ret.current = ret.LANDSCAPE; 
        }) 
       } 
       else if (window.orientation == 0 || window.orientation == 180) { //Portrait Mode 
        $timeout(function(){ 
         ret.current = ret.PORTRAIT; 
        }) 
       } 
      } 
     } 

     $ionicPlatform.ready(function() { 
      window.addEventListener("orientationchange", handleOrientation); 
      window.addEventListener("load", handleOrientation); 
     }) 

     return ret; 

    }) 
.controller('SomeController', function(Orientation, $scope) { 
     $scope.$watch(
      function(){ 
       return Orientation.current; 
      }, 
      function(orientation){ 
       if(orientation === Orientation.LANDSCAPE) { 

       } 
       if(orientation === Orientation.PORTRAIT) { 

       } 
      }) 
    })