Angularjs历史后退按钮不起作用答案

【问题标题】：Angularjs History back button not workingAngularjs历史后退按钮不起作用
【发布时间】：2016-09-16 16:20:43
【问题描述】：

我一直在查看 Angularjs Back Button 事件的大量示例，但没有一个示例对我有用。每当按下浏览器后退按钮时，我的代码都不会收到事件。这几天我一直在摸不着头脑。

我想要做的只是收到一个警报，询问用户是否确定他们想要返回并丢失所有数据。

以下是我一直在尝试的代码。它是其他示例的副本，但具有完整的代码。

我尝试使用 $scope 而不是 $rootscope 在控制器中添加 $on，我尝试在 routechangestart 上进行监视，似乎没有任何东西可以抓住后退按钮。

有人有完整的小例子或告诉我我做错了什么吗？

var BackButtonTest = angular.module('BackButtonTest', ['ngRoute']);

BackButtonTest.controller('backbuttonCtrl', function($scope, $location, $route) {
});

BackButtonTest.run(function($rootScope, $route, $location){
    //Bind the $locationChangeSuccess event on the //rootScope, so that we don't need to 
    //bind in induvidual controllers.

    $rootScope.$on('$locationChangeSuccess', function() {
        $rootScope.actualLocation = $location.path();
    });

    $rootScope.$watch(function () {
        return $location.path()
    }, function (newLocation) {
        if($rootScope.actualLocation === newLocation) {
        // run a function or perform a reload
        }
    });
});

我使用的HTML代码如下：

<!doctype html>
<html lang="en" ng-app="BackButtonTest">
<head>
    <meta charset="utf-8">
    <title>BackButtonTest App</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>
<script src="app.js"></script>
<body ng-controller="backbuttonCtrl as bbc">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-8 col-md-push-2">
       Some random text
      </div>
    </div>
  </div>
</body>
</html>

【问题讨论】：

这篇文章会有所帮助：weblogs.asp.net/dwahlin/…

标签： javascript jquery angularjs

【解决方案1】：

我建议使用$locationChangeStart，因为您可以在此处“防止”更改发生。

逻辑基本上是：

拦截位置更改请求。
确定是否需要显示模态
如果是 preventDefault 位置更改（这将阻止更改发生）
保存用户想去的地方
显示您的模态
如果他们点击“取消”，忘记 #4
如果他们单击确定，则允许 #4 发生。

此链接详细介绍了如何操作：http://weblogs.asp.net/dwahlin/cancelling-route-navigation-in-angularjs

【讨论】：

嗨 Nix，我确实按照您的建议尝试了 $locationChangeStart，但没有运气。还尝试了 dwahlin 示例，但仍然没有运气。有人有 jsfiddle 或 plnkr 的例子吗？
好的，所以我在 Chrome 中打开了开发者控制台，我想要的是捕获单击后退按钮时触发的事件。这是行不通的。它只是返回到上一页而不点击任何 $locationChageStart、$locationChageSuccess、$routeChangeStart、$watch（用于位置路径更改）。此外，我在控制器和运行中都添加了提到的事件。当点击浏览器后退按钮时，这两个地方都没有捕捉到触发的事件。