Question

我正在使用AngularJS创建单页应用程序（SPA），并且想知道如何使用移动设备上的后退按钮进行最佳管理。

我创建了没有视图的应用程序。一个js表单，一个html页面，没有部分。使用ng-show和控制器显示信息，该控制器可根据分配给它们的标签号隐藏<div>标签。

我需要做的是当按下后退按钮时应用程序不关闭。但是因为我没有将任何参数传递给URL（因为URL永远不会改变）是否有一种非常好的方法来为移动设备上的后退按钮提供功能？

这是一个代码示例，但我还添加了一个plunk来尝试更好地帮助澄清我的需求。

<div>
<a href ng-click="toggle = !toggle">=</a>
<ul ng-show="toggle">
  <li><a id="Home" ng-click="navi.selectTab(1); toggle = false">Home</a></li>
  <li><a id="About" ng-click="navi.selectTab(2); toggle = false">About</a></li>
  <li><a id="Contact" ng-click="navi.selectTab(3);  toggle = false">Contact</a></li>    
</ul>

<div ng-show="navi.isSelected(1)">

或 <div ng-show="navi.isSelected(2)"> 或

<div ng-show="navi.isSelected(3)">

Answer 1

如果您只是想阻止后退按钮立即离开SPA，您可以使用window.onbeforeunload（）来警告用户后退按钮将退出应用程序。

window.onbeforeunload = function () {
   return "Are you sure you want to leave?"
}

否则，为了使您的应用程序具有状态并允许用户使用后退/前进按钮，您将需要使用ui-router或angular-routes。

使用后退按钮移动单页面应用程序AngularJS

1 个答案: