Angularjs,Ionic Framework - 导航回模态的选项

标签 angularjs ionic-framework

我正在做一个项目,我们在页面上有一组项目。 单击此页面上的每个项目时,都会打开一个模态,向用户显示一个按钮,该按钮指向一个单独的 Controller 和另一个 View 。

当用户点击已加载页面上的后退按钮时,会将用户带到数组页面。我需要按下后退按钮才能查看模式,我已经完成了几个选项:

  1. 将加载的页面变成覆盖原始模态的模态,因此当用户单击按钮时,它会打开它,而将原始模态保留在原位。

  2. 重新连接后退按钮以更改状态以使用 $state.go()。这将需要在每个 Controller 中。

  3. 篡改 $rootScope.viewHistory,这个选项似乎是最 hackiest 的。这将读取之前的状态并直接对其进行编辑,使后退按钮指向其他地方。

  4. $rootScope 中有一个后退按钮函数,可以传递两个参数:state 和stateParameters。这将检查是否已将任何内容传递给它并相应地更改状态。如果未传递任何内容,它将使用正常的后退按钮功能。

优缺点

(1) 将这个页面变成模式的主要问题是它需要复制页面,这是因为它需要在两个 Controller 中,这样我们就不会丢失项目列表页面上的数据,并且它需要从它自己的 Controller 中的菜单访问。这可能有用的原因是另一个页面需要以这种方式工作。

(2) 调整后退按钮的主要问题是后退按钮目前仅位于一个页面上,菜单是所有其他状态的抽象父状态。这可能意味着我们需要将后退按钮拉到每个页面上以逐页更改其功能。这也可能会弄乱页面在更改状态时的滑动方式,因为我不知道有任何方法可以从函数中调用滑动方向。

(3) 这看起来相当简单,但我不知道这是否可行,感觉真的很糟糕

(4) 如果我们要为后退按钮创建一个 $rootScope 函数,我们需要先调用它,此时,一个 Controller 会先于其他 Controller 被调用,但是一旦我们集成推送通知,这一切都可能改变。

什么是最好的解决方案?我是否应该在加载基于 $rootScope 的后退按钮的主 Controller 中重新工作(这可能吗?)?有没有办法在将数据保留在原始 Controller 中的同时在不同的 Controller 中加载模态?我最好的选择是什么?

最佳答案

首先,这是一个笨拙的设计模式。如果你触发了一个模态,所有的 UI 转换都应该局限于模态,这样你就不会混淆你的用户。将模态看作是简单地钻入一个 Action 而不是导航元素的东西。如果每个数组元素需要多个交互页面,请将它们全部构建在模态内。您应该能够在自定义指令中完成此操作。

如果您绝对需要使用模态作为在应用中的其他地方导航的中介,我建议缓存触发模态所需的参数(通过本地存储、 session 存储、cookie 等)。当用户第一次触发模式时,存储参数。当您导航到父 Controller 时,检查参数是否存在,如果存在,则以编程方式触发模态。只是不要忘记在模式关闭/用户从父页面导航回来后立即从存储中删除参数。

关于Angularjs,Ionic Framework - 导航回模态的选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27838725/

相关文章:

angular - Ionic2 ion-toggle 在 ionChange 上获得值(value)

angularjs - 什么是 AngularJS 的 Angular 种子和 Angular-Seed 项目?

javascript - 在 AngularJS 应用程序中使用服务器日期的方法

javascript - 模块 'angular' 不可用

javascript - Angular 2 + Typescript显示函数内的变量

javascript - 360 图像在 Ionic V2 应用程序上查看

javascript - 无法在我的 Angular 模板中的对象内部获取值

javascript - Angularjs ng-Grid注入(inject)错误

node.js - 将冗长的数据下载为 CSV 文件

ionic-framework - Ionic 6 - 只有一半的标题显示