Ändern Sie die Vorlage dynamisch abhängig von der Bildschirmausrichtung ionic v1

Question

Ich arbeite an ionischen 1 Projekt. Ich möchte die Vorlage ändern nach Bildschirmausrichtung wie:

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

Ich habe versucht, unter Code:

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

Aber dies nur einmal ausgeführt wird. Ich möchte jedes Mal laufen, wenn sich die Ausrichtung ändert.

Wie kann ich das schaffen?

Ich bin in der Lage, die Orientierung mit https://github.com/apache/cordova-plugin-screen-orientation Plugin zu bekommen.

Answer 1

Sie haben Ihre Route-Definition ein wenig neu zu schreiben, eine IIFE benutzen, um Ihre gewünschte Vorlage-URL für templateUrl je nach Bildschirmorientierung auszuführen:

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

Und Sie einen Zuhörer müssen Screen- Orientierungsänderungen die Seite neu zu laden, wenn eine Änderung erkannt wurde:

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) 

}); 

Obwohl ich es nicht testen konnte, sollte diese Arbeit.

Ich hoffe, es hilft.