如何检测用户是否在Angularjs中单击浏览器后退按钮

我有一个类似表单的页面，其中包含一些数据。并希望在用户单击浏览器后退按钮时显示弹出/警报，询问“他们是否要返回或停留在同一页面”。我正在使用angular ui router的

$stateProvider

，只想将其绑定到一个状态/视图。

这是我之前对其他一些问题的回答，但应该可以帮助您

您可以使用angular

$routeChangeStart

$routeChangeStart 在路线改变前广播。此时，路由服务开始解析发生路由更改所需的所有依赖项。通常，这涉及获取视图模板以及“解析路由”属性中定义的任何依赖项。一旦解决了所有依赖项，就会触发$routeChangeSuccess

可以通过调用事件的

preventDefault

方法来阻止路由更改（以及触发它的

$location

更改）。有关事件对象的更多详细信息，请参见

$rootScope.Scope

---

所以请尝试下面的代码

  $scope.$on('$routeChangeStart', function (scope, next, current) {
        if (next.$$route.controller != "Your Controller Name") {
            // Show here for your model, and do what you need**
            $("#yourModel").show();
        }
    });

更新： 您需要在模型弹出窗口中编写功能工作。像

放一些链接按钮给你

• 你确定要转到上一页吗
• 你想保持当前页面吗
• 你想注销吗？等等

然后为go prev页面添加ng click事件，使用返回false保持当前页面，等等

有意义吗，伙计？

这是我的解决方案

app.run(function($rootScope, $location) {
    $rootScope.$on('$locationChangeSuccess', function() {
        if($rootScope.previousLocation == $location.path()) {
            console.log("Back Button Pressed");
        }
        $rootScope.previousLocation = $rootScope.actualLocation;
        $rootScope.actualLocation = $location.path();
    });
});

---

您最好在angular ui路由器上使用$stateChangeStart事件。$routeChangeStart将出现问题，因为url更改时将触发$routeChangeStart事件

例如： 您有4个状态，每个状态有2个子状态，每个子/状态或状态不与url关联。在这种情况下，听$routeChangeStart可能不起作用

在要提示用户确认重定向的控制器/视图中执行此操作

当当前作用域（即您所在的视图/控制器）中的状态更改时，将调用此函数

---

与syraz37的答案类似，但对于新的

$transition

API：

angular
    .module('app')
    .run(function($rootScope, $transitions) {

        // Track "previous state" to be used elsewhere to determine if the user
        // goes "back".
        $transitions.onStart({}, (transition) => {
            if ($rootScope._previousState === transition.$to().name) {
                $rootScope._isPreviousState = true;
            } else {
                $rootScope._isPreviousState = false;
            }
            $rootScope._previousState = transition.$from().name;
        });

    });

然后，在任何控制器中，您都可以检查它是否作为“前一状态”加载：

---

这是ninjaPixel在上面指出的警告，你可以先进入状态A，然后进入状态B，然后再进入状态A（所有都是正向的），它会认为用户已经“返回”，但出于我们的需要，这是有效的。

嘿，看看我的答案，很确定这是最好的答案。您尚未标记正确的答案，答案中是否还有其他内容？我应将此代码放置在何处？你能提供我更多的细节吗？因为我只想将这个行为绑定到这个视图，而不是其他视图。谢谢我把那些代码放在确认弹出窗口Ctr中，但是没有工作，我想我理解错了，类似这样的东西；angular.module（'ecom.submitter.report'）.controller（'ExitCtr'，['$scope'，'$location'，function（'scope，$location）{$scope.{$on（'routeChangeStart'，function（scope，next，current）{如果（next.$$route.controller！=“ExitCtr”）{//在这里显示您的模型，并执行您需要的**警报（'haha'））返回false；}}}）；}]）；您需要在控制器中配置

$route

。请首先添加我们应该将其放入.run（）和/或使用$rootScope吗？根据，如果用户单击“前进”按钮，或者如果他们导航到他们所在的最后一页，而不是单击“后退”按钮，也会触发此操作。很酷，正如您所提到的，我有一个确切的场景，这解决了我的问题。谢谢

angular
    .module('app')
    .run(function($rootScope, $transitions) {

        // Track "previous state" to be used elsewhere to determine if the user
        // goes "back".
        $transitions.onStart({}, (transition) => {
            if ($rootScope._previousState === transition.$to().name) {
                $rootScope._isPreviousState = true;
            } else {
                $rootScope._isPreviousState = false;
            }
            $rootScope._previousState = transition.$from().name;
        });

    });

if ($rootScope._isPreviousState) {
    // ...reload some aspect of the controller state...
}