离子历史如何工作以及何时创建非根堆栈?

时间:2015-07-02 13:31:52

标签: angularjs angular-ui-router ionic-framework

我正在使用ionic v1.0.0,并且不了解$ionicHistory管理的并行历史记录的工作方式。

特别是在Android设备上,当使用(以前的硬件)后退按钮时,我的Angular应用程序有时表现得很奇怪,我想了解原因。 (例如:导航回打开$ionicGoBack()很久以前关闭的视图)

对我来说,似乎有些ui-router导航创建了新的历史堆栈,而其他人则将历史项目放在根历史中,即使从状态到子状态应该附加到状态记录为IMO的历史记录中。

问题

  • 有人可以解释ui-sref$state.go(...)在哪些情况下将历史记录项追加到新创建的堆栈中?
  • 什么时候附加到root
  • 是否以特殊方式处理模态?

很抱歉没有更具体,但应用程序相当复杂,我不知道如何在单个plunkr中隔离问题。也许我错过了一篇很好的文档......

1 个答案:

答案 0 :(得分:31)

即使您可能找不到您要求的所有信息,我也会尝试回答这个问题。

很多人 - 包括我自己 - 似乎很难理解导航系统和历史是如何运作的。

我之前回答过question试图解释为什么事情不能按预期发挥作用。 导航似乎跟踪用户使用集合访问的每个视图。 实际上$ionicHistory对象中有2个集合。 第一个$ionicHistory.viewHistory().views似乎跟踪当前堆栈中的每个访问视图,而另一个$ionicHistory.viewHistory().histories跟踪整个应用程序的所有历史记录。

您可能会有标签,侧边菜或常规视图的不同类型的历史记录。

您可以在此codepen中查看并行独立历史记录的工作原理 那里有2个不同的历史。一个用于主页选项卡,第二个用于关于选项卡。

浏览每个标签中的子项并返回上一个标签,您会注意到导航系统已记住之前的状态。

我在这里准备了另一个plunker,您可以在其中查看导航的工作原理以及页面中显示的一些详细信息。

每次用户访问新页面时,都会更新视图集合$ionicHistory.viewHistory().views(集合中的当前视图包含在方括号中)。

如果视图已添加到集合中,则不会(不应该)再次添加该视图。

您可以更改清除历史记录的行为($ionicHistory.clearHistory())或设置当前历史记录的根目录:

$ionicHistory.nextViewOptions({
    historyRoot: true
});

在我的plunker的Invoice页面中有一个绿色按钮(Other Root View)。按下时,我设置新的历史根并更改状态:

$ionicHistory.nextViewOptions({
    historyRoot: true
});
$state.go('otherviewroot');

事情按预期工作,事实上现在我没有后视图,我的堆栈只包含当前视图。

当您尝试序列时,事情变得混乱:

Home - Contacts - Invoices - Home (button in the header).

现在似乎Ionic失去了对序列的控制,并继续为该集合添加视图。

按主页按钮应清除后退按钮,因为我们位于当前历史记录的根目录下,但不会发生。

反复使用相同的模式会无限期地增加集合的大小。

我想这不是正确的行为,需要修复。

回到你的问题。

Android中的后退按钮...意味着它遵循相同的模式。

幸运的是,模态不会被视为常规视图,也不会影响集合。