使用 Angular UI-Router 在 Ionic 框架中将状态作为新路由处理
Posted
技术标签:
【中文标题】使用 Angular UI-Router 在 Ionic 框架中将状态作为新路由处理【英文标题】:Handle State as new Route in Ionic Framework with Angular UI-Router 【发布时间】:2014-03-04 21:21:10 【问题描述】:我正在使用 Ionic 框架及其 AngularJS UI-Router 和 $stateProvider 来处理我的应用程序中的不同视图。
但是,我无法弄清楚如何告诉 $stateProvider 我有不同的“主视图”,每个都有不同的子视图。
例如,当我在/#/home
上时,单击将我发送到/#/about
的链接,然后/#/about
不会呈现为它自己的新视图。相反,它会转换到它,因为它是 /#/home
的子页面。
当我用 AngularJS 的 $routeProvider 替换 $stateProvider 时,它的工作方式与它应该的一样,但是所有的转换都消失了。
我制作了一支 Pen 供您查看。
http://codepen.io/anon/pen/gBDFi
它们之间不应有过渡。每个“基本”网址都应该是一个新的“标签”。
【问题讨论】:
我不确定您所说的“子页面”是什么意思。将hide-back-button="true"
添加到两个视图(<view></view>
)并从<nav-view></nav-view>
中删除animation="slide-left-right"
。这就是你想要达到的目标吗?但是只有在你的“主要视图”之间切换时?
几乎!这正是我想要实现的行为。但我想保留subpages
的滑动动画。对于subpages
,我的意思是例如/#/about/tom
,其中tom
是/#/about
的子页面。
【参考方案1】:
不知道这是否仍然相关,因为它是在 2 月发布的,我绝不是 ng-pro,但这是我的尝试 JSBinLink
我做了两件主要的事情,将内容包装在 ion-tabs 中,并将其作为抽象状态添加到 stateProvider 中。
使用此结构,您有两个独立的选项卡“主页”、“关于” - 注意,没有返回按钮。 但是,如果您在“关于”中导航到“汤姆” - 您会得到一个后退按钮。
还有其他方法可以实现类似的东西,一种是创建子状态等。
我建议查看 UI-Routers 文档。 它大部分写得很好并且信息量很大 - 还有一个 Tom Kindberg 的创建视频,通过 here 解释了它的主要概念。
希望这会有所帮助。
【讨论】:
【参考方案2】:$StateRouteProvider 和 $UrlRouteProvider 的区别..
$UrlRouteProvider.otherwise(url); -->路由到给定的url。
$StateRouteProvider.otherwise(state); -->路由到给定状态。
因此,如果您使用的是 ui-router,那么无论何时需要更改视图,请使用 $state.go()。在 $location.path(URL) 的情况下,将在从独立状态转换到当前状态的情况下工作。如果您希望通过同一父级下的州进行路由,则必须使用 $state 路由。
【讨论】:
以上是关于使用 Angular UI-Router 在 Ionic 框架中将状态作为新路由处理的主要内容,如果未能解决你的问题,请参考以下文章
将 Angular UI-Router 与 Phonegap 一起使用
AngularJS:UI-router 警告:尝试多次加载 Angular
使用 Angular ui-router 设置 URL 查询参数而不改变状态