Question

我正在研究离子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

您必须稍微重写路线定义，使用IIFE执行templateUrl所需的模板网址，具体取决于您的屏幕方向：

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)

});

虽然我无法测试，但这应该有效。

希望它有所帮助。

动态更改模板取决于屏幕方向离子v1

1 个答案: