Question

我有一个带有一些数据的表单式页面。并且想要在用户点击浏览器后退按钮时显示弹出/警报，询问＆＃34;他们是否想要返回或停留在同一页面上＃34;。我正在使用angular-ui-router＆＃39; $stateProvider并希望将其仅绑定到一个状态/视图。

Answer 1

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

您可以使用有角度的$routeChangeStart

来完成此操作

$ routeChangeStart

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

可以通过调用事件的$location方法来阻止路由更改（以及触发它的preventDefault更改）。有关事件对象的详细信息，请参阅$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 page添加ng-click事件，使用return false保留当前页面等。

是否会产生感觉？

Answer 2

使用angular ui路由器使用 $ stateChangeStart 事件会更好。 $ routeChangeStart会出现问题，因为当URL更改时会触发$ routeChangeStart事件。

例如：

您有4个状态，每个状态有2个子状态，并且每个子/状态或状态都不与网址相关联。在这种情况下，监听$ routeChangeStart可能不起作用。

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

当状态在您当前范围（您所在的视图/控制器）中发生变化时，将调用此方法

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    //Open the modal
    $('my-modal').show();
});

Answer 3

这是我的解决方案

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();
    });
});

Answer 4

与syraz37的答案类似，但对于新的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; }); }); API：

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

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

window.ejs

这是ninjaPixel指出的警告，您可以在其中进入状态A，然后进入状态B，然后再次进入状态A（都朝着前进方向），它会认为用户已经“退回”，但是对于我们的需求行之有效。

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

4 个答案:

$ routeChangeStart

更新

例如：