동적으로 템플릿을 화면 방향에 따라 바꿉니다 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) 

}); 

테스트 할 수는 없지만 제대로 작동합니다.

희망이 있습니다.