妥善处理 Screen/Device 方向

Question

我有这个例子：http://codepen.io/poliveira89/pen/VeZLJX/

在这个例子中，我有一个 <ion-nav-view></ion-nav-view> 我在其中插入了一个带有 2 个选项卡（主页和关于）的选项卡视图，其中还包含嵌套视图和嵌套状态。

我的主要关注点：检索 screen/device 方向并动态重新排列纵向和横向的内容。

在“主页”选项卡上，我 "pretend" 实现了 => 更新视图 (HTML) 关于屏幕旋转后模型的更改。这显然不适用于模拟器和真实设备。

我在“关于”选项卡上复制了示例，因为在“主页”选项卡上不起作用，但我稍微更改了代码我尝试了一些 "refresh" 触发器，带有按钮 (ng-click) 和 $超时并发出警报。当我单击按钮时，视图会使用模型上的新值刷新 HTML。

注意：我尝试过其他触发器 - $http、$interval、...

我认为这可能与 NavView 上的 "cache" 有关，如下所示：

.state('tabs.home', {
  url: "/home",
  cache: false,
  views: {
    'home-tab': {
      templateUrl: "templates/home.html",
      controller: 'HomeCtrl'
    }
  }
})

但是，在我禁用它之后，什么都没有改变，仍然不起作用。

PS: 屏幕 Rotation/Orientation 侦听器工作，在模拟器和真实设备上，我已经调试了控制台消息。

什么在 Angular 或 Ionic 上无法正常工作？或者为什么只在触发后更新视图？

Answer 1

这是因为您正在 Angular 摘要循环之外更新 $scope。

尝试：

$scope.$apply(function() {
    $scope.orientation = $window.orientation;
});

妥善处理 Screen/Device 方向

Properly handle Screen/Device Orientation

html

android

orientation

screen-orientation

ionic-framework