Multiple views depending on screen orientation

ionic-v1
4

Regardless of the official support for split views from Ionic, you can already have different views for each orientation, with little logic separation. AngularUI Router understands functions for both templateUrl and controller fields on the state configuration. Idealy, you’d be doing something like this:

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

With that, you can run $state.reload() (read here) to refresh the view. Unfortunately this implementation will destroy the current “state” of your state: if the user had provided any input or scrolled down a list, it will be gone. Those can be solved though, and you can also have both views on the same templateUrl, and just use ng-ifs to switch between landscape and portrait as soon as a $rootScope.orientation field changes.

1 Like