ionic(cordova)にて screen-orientationプラグインを使って画面ごとに回転時の表示を切り替える

はじめに

今回やりたかったことは
端末を回転したときに画面Aでは縦固定、画面Bでは縦横どちらにも対応みたいなこと。

プロジェクトを作成

$ ionic start sample tabs

今回は複数画面必要だったのでtabsを使った。

プラグインをインストール

$ ionic plugin add https://github.com/apache/cordova-plugin-screen-orientation.git

config.xmlを編集

<platform name="ios">                                                                                                                                                                                              
  <preference name="Orientation" value="all" />                                                                                                                                                                    
</platform>

デフォルトではiPhoneで縦固定なようなので縦横対応する形に修正。

実装

app.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {

      ・・・

    // ★ここを追加 基本的には縦固定
    screen.orientation.lock('portrait');
  }
})
.config(function($stateProvider, $urlRouterProvider) {

  ・・・

    .state('tab', {
    url: '/tab',
    abstract: true,
    controller: 'TabCtrl', // ★ここを追加
    templateUrl: 'templates/tabs.html'
  })

  ・・・

controller.js

angular.module('starter.controllers', [])

  .controller('TabCtrl', function($scope, $rootScope) {
    $rootScope.$on("$stateChangeStart", function(event, toState) {

      // 縦横両対応にしたい画面ではロックを解除
      if (toState.name == "tab.chat-detail") {
        screen.orientation.unlock();
      } else {
        screen.orientation.lock('portrait');
      }
    });
  })

とりあえずこれでやりたいことはできた。以上です。