使用 ng-include 进行历史回溯导航 [英] History back navigation using ng-include

问题描述

我开始使用 angularjs 开发单页 Web 应用程序，现在我正在定义导航.所以，我最终使用了 2 个级别的导航:

I started to develop a single page web app with angularjs and now I'm defining the navigation. So, I end up using 2 levels of navigation:

第一级:使用 ng-view 进行主导航.

1st level: Main navigation using ng-view.

第二级:使用 ng-include 使用顶部和底部栏的子视图导航.

2nd level: SubView navigation with the top and bottom bars using ng-include.

这是我们的 iphone 场景:

This is our iphone scenario:

iphone 场景对我来说似乎没问题，因为我们用按钮控制所有导航.但是，现在让我们考虑一下 android 场景，用户可以使用历史返回按钮(物理按钮)来导航回来.子导航用ng-include怎么支持?

The iphone scenario seems ok for me because we control all navigation with our buttons. But, now lets think in android scenario where the user can use the history back button(physical button) to navigate back. How can we support it if we use ng-include for the subnavigation?

提前致谢

推荐答案

您可以在 URL 中添加一个参数，使其与 Android 历史记录一起使用.

You could add a parameter to your URL to make it work with Android history.

#/main?page=1
#/main?page=2

然后使用 that 来控制您的应用程序的状态，然后 android 后退按钮将起作用.

Then use that to control the state of your app, and then android back button will work.

您可以使用 $location.search 设置 url 参数:

You can set url parameters with $location.search:

$location.search('page', 4);

$location.search 文档:http://docs.angularjs.org/api/ng.$location#search

$location.search docs: http://docs.angularjs.org/api/ng.$location#search

还有一件事:您需要将 reloadOnSearch: false 选项添加到您的视图的 $routeProvider.when() 声明中.默认情况下，当您使用 $location.search() 更改查询参数时，整个视图会重新加载.将其设置为 false 将使其不会重新加载，这就是您在这种情况下想要的:

And one more thing: You'll want to add reloadOnSearch: false option to your $routeProvider.when() declaration for your view. By default, the whole view reloads when you change a query parameter with $location.search(). Setting that to false will make it not reload, which is what you want in this case:

$routeProvider.when('/main', { reloadOnSearch: false });

reloadOnSearch 文档:http://docs.angularjs.org/api/ng.$routeProvider#when

reloadOnSearch docs: http://docs.angularjs.org/api/ng.$routeProvider#when

这篇关于使用 ng-include 进行历史回溯导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！