我一直在研究并寻找不同的解决方案,但似乎找不到适合我需要的解决方案。我有一个AngularJS应用,正在系统上进行一些更改。它具有许多HTML视图,用于显示更改,在出现问题时推送和删除更改。因此应用程序如下所示:
Page 1: Login and get user input
Page 2: Show changes that user is going to commit
Page 3: Push changes
Page 4: Show results
They have an option to remove changes if something does no look right.
我正在编写用于在系统上执行更改并使用Flask for API的python脚本。
现在,我的问题是,如果用户位于第4页上并按下“后退”按钮,它将返回到“推送更改”页面,并且实际上开始再次重新推送相同的更改。有什么方法可以修改它,以便如果用户在任何页面上单击浏览器上的“后退”按钮,会将它们发送回首页?
共享代码无济于事,因为我有很多带有大量代码的文件。这是我的路线和景观的一些概述,可能会使它变得更加清晰:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "./views/userForm.htm",
controller : "inputController"
})
.when("/checkChanges", {
templateUrl : "./views/checkChanges.htm",
controller : "checkChangesController"
})
.when("/pushChanges", {
templateUrl : "./views/pushChanges.htm",
controller : "pushChangesController"
})
.when("/results", {
templateUrl : "./views/results.htm",
controller : "resultsController"
})
.when("/remove", {
templateUrl : "./views/remove.htm",
controller : "removeController"
})
答案 0 :(得分:1)
您可以添加popstate
侦听器来处理用户按下后退或前进按钮的事件。
window.addEventListener('popstate', function() {
$state.go(...); //go to your home state
});
更新:如何重定向到主状态
点击下一段代码,您将创建组件主页,设置其HTML模板,控制器,然后添加配置以将其映射到URL'/'。
var home = {
templateUrl: './templates/home.html',
controller: 'homeController'
};
angular
.module('myApp')
.component('home', home)
.config(["$stateProvider", function($stateProvider){
$stateProvider
.state('home', {
url: '/',
component: 'home',
});
}]);
然后,在popstate事件的事件侦听器中,您将有$state.go('home');
答案 1 :(得分:0)
尝试一下;
window.addEventListener('popstate', () => { //handler });