使用 Angular UI-Router 在 Ionic 框架中将状态作为新路由处理 [英] Handle State as new Route in Ionic Framework with Angular UI-Router
问题描述
我正在使用 Ionic 框架及其 AngularJS UI-Router 和 $stateProvider 来处理我的应用程序中的不同视图.
I'm using the Ionic Framework with its AngularJS UI-Router and $stateProvider to handle different views in my app.
但是,我无法弄清楚如何告诉 $stateProvider 我有不同的主视图",每个视图都有不同的子视图.
However, I'm having trouble figuring out how to tell the $stateProvider that I got different "Main View's", with each having different Subviews.
例如,当我在 /#/home
上时,单击将我发送到 /#/about
的链接,然后单击 /#/about
不会像它自己的新视图那样呈现.相反,它过渡到它,因为它是 /#/home
的子页面.
When I'm on /#/home
for example, and click on a link which sends me to /#/about
, then /#/about
doesn't get rendered as it's own, new view. Instead it transitions to it as it were a subpage of /#/home
.
当我用 AngularJS $routeProvider 替换 $stateProvider 时,它的工作原理应该是这样,但随后所有的转换都消失了.
It works like it should when I replace $stateProvider with the AngularJS $routeProvider, but then all the transitions are gone.
我已经创建了一个 Pen 供您查看.
I've created a Pen for you to take a look at it.
http://codepen.io/anon/pen/gBDFi
它们之间不应该有过渡.每个基本"网址都应该是一个新的标签".
There should be no transition between them. Every "base" url should be a new "tab".
推荐答案
$StateRouteProvider 和 $UrlRouteProvider 的区别..
Difference between $StateRouteProvider and $UrlRouteProvider ..
$UrlRouteProvider.otherwise(url);-->路由到给定的网址.
$UrlRouteProvider.otherwise(url); -->route to given url.
$StateRouteProvider.otherwise(state);--> 路由到给定状态.
$StateRouteProvider.otherwise(state); -->route to given state.
因此,如果您正在使用 ui-router,那么无论何时需要更改视图,请使用 $state.go().在 $location.path(URL) 的情况下,将适用于从独立状态到当前状态的转换.如果您希望通过同一父级下的州进行路由,则必须使用 $state 路由.
So, if you are using ui-router then wherever view change is required use $state.go(). In a case of $location.path(URL) will work in a case like the transition to the independent state to current state. If you are looking to route through states under the same parent then you have to use $state route.
这篇关于使用 Angular UI-Router 在 Ionic 框架中将状态作为新路由处理的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!