テンプレートを画面の向きに応じて動的に変更するionic v1

Question

私はionic 1プロジェクトに取り組んでいます。私は次のように画面の向きに応じてテンプレートを変更したい：

if(portrait) 
    // template 1 
else 
// template 2 

私はコードの下に試してみました：

//detect orientation here 
function weAreOnPortrait() { 
    return true 
}; 
$stateProvider.state({ 
    templateUrl: function() { 
    if (weAreOnPortrait()) {return 'tmpl/feature/_portrait.html'} 
    else {return 'tmpl/feature/_landscape.html'} 
    }, 
    controller: 'CommonControllerForBothCases' 
}); 

しかし、これは一度だけ実行されています。私はオリエンテーションが変わるたびに走りたい。

これはどうすれば管理できますか？

https://github.com/apache/cordova-plugin-screen-orientationプラグインを使用してオリエンテーションを取得できます。

Answer 1

あなたの画面の向きに応じて、templateUrlのため、ご希望のテンプレートURLを実行するためにIIFEを使用して、あなたのルート定義を少し書き換える必要があります：

function weAreOnPortrait() { 
    return screen.orientation.type && screen.orientation.type.indexOf('portrait') !== -1 
} 

$stateProvider.state({ 
    templateUrl: (function() { 
    if (weAreOnPortrait()) {return 'tmpl/feature/_portrait.html'} 
    else {return 'tmpl/feature/_landscape.html'} 
    })(), 
    controller: 'CommonControllerForBothCases' 
}); 

そして、あなたが画面 - リスナーが必要変更が検出された場合、ページをリロードする方向が変わります。

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

    // if a change was detected reload page again by using transitionTo 
    $state.transitionTo($state.current, { 
      reload: true 
    }); 

    // or by using go 
    $state.go($state.current, {}, {reload: true}); 

    // or by using location 
    location.reload(true) 

}); 

これはテストできませんでしたが、これはうまくいくはずです。

希望します。