保持相同状态时的离子导航动画

Question

我有一个离子应用程序，它有一个详细视图，用于显示某些元素的详细信息。在每个详图视图上，我都会显示指向next和previous元素的按钮。在导航时，状态保持不变，只有视图模型实例会更改，并且将显示新数据。我的state看起来像：

.state('main.tabs', {
  url: '/element/:id',
  params: {
    previous: null,
    next: null
  },
  cache: false,
  views: {
    'pageContent': {
      templateUrl: 'element/templates/element.tabs.html',
      controller: 'ElementTabCtrl as tabCtrl',
    }
  },
  resolve: {
    activeElement: function (DataService, $stateParams) {
      return DataService.setActiveElement($stateParams.id);
    }
  }
})

触发导航的函数是：

  $scope.tabNav = function (tabSref) {
    $state.go(tabSref, {id:activeElement.id});
  }

现在，每当我单击调用tabNav()函数的按钮时，屏幕都会冻结几毫秒，然后新参数加载到视图中。

如何执行导航动画或显示加载屏幕，直到活动元素更改为止？

Answer 1

选项 1：重新加载视图。您可以使用属性重新加载将第三个"选项"对象添加到 $state.go 调用中，以始终重新加载当前视图，从而触发导航动画并删除屏幕冻结。

$state.go(tabSref, { id: activeElement.id }, { reload: true });

有关详细信息，请参阅 http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state。

重新加载 (v0.2.5( - {boolean=false|string|object}，如果为 true，即使没有状态或参数更改，也会强制转换。它将重新加载当前状态和父状态的解析和视图。如果 reload 是字符串(或状态对象(，则提取状态对象(按名称或对象引用(;和 \ 转换重新加载该匹配状态及其所有子状态的解析和视图。

选项 2：显示加载屏幕。Ionic有一个$ionicLoading服务，您可以在页面过渡时使用它来覆盖加载屏幕。根据ui-router wiki https://github.com/angular-ui/ui-router/wiki，一旦转换完成，就会广播$stateChangeSuccess事件，这意味着您可以执行以下操作：

$ionicLoading.show({ template: 'Loading...' });
$state.go(tabSref, { id: activeElement.id });
$rootScope.$on('$stateChangeSuccess', _onChangeStateSuccess);
function _onChangeStateSuccess () {
  $ionicLoading.hide();
}

$stateChangeSuccess - 在状态转换完成后触发。 $rootScope.$on('$stateChangeSuccess'， function(event， toState， toParams， fromState， fromParams({ ... }(

您可以在此处阅读有关$ionicLoading的更多信息 http://ionicframework.com/docs/api/service/$ionicLoading/