如何使用angular检测浏览器后退按钮单击事件？

Question

是否可以通过浏览器中的历史记录返回按钮检测用户是否输入了页面？我最好想用angular.js检测这个动作.

我不想使用角度路由.如果用户提交表单并在成功提交到服务器并重新定向之后,它也应该有效,如果用户使用浏览器的后退按钮返回到表单,也应该可以.

Answer 1

这是Angular的解决方案.

myApp.run(function($rootScope, $route, $location){
   //Bind the `$locationChangeSuccess` event on the rootScope, so that we dont need to 
   //bind in induvidual controllers.

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

   $rootScope.$watch(function () {return $location.path()}, function (newLocation, oldLocation) {
        if($rootScope.actualLocation === newLocation) {
            alert('Why did you use history back?');
        }
    });
});

我正在使用一个运行块来启动它.首先,我将实际位置存储在$ rootScope.actualLocation中,然后我监听$ locationChangeSuccess,当它发生时,我用新值更新actualLocation.

在$ rootScope中我监视位置路径的变化,如果新位置等于previousLocation是因为没有触发$ locationChangeSuccess,这意味着用户已经使用了历史记录.

Answer 2

如果您想要更精确的解决方案(检测后退和前进),我将通过Bertrand提供的扩展解决方案:

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


$rootScope.$watch(function () {return $location.path()}, function (newLocation, oldLocation) {

    //true only for onPopState
    if($rootScope.actualLocation === newLocation) {

        var back,
            historyState = $window.history.state;

        back = !!(historyState && historyState.position <= $rootScope.stackPosition);

        if (back) {
            //back button
            $rootScope.stackPosition--;
        } else {
            //forward button
            $rootScope.stackPosition++;
        }

    } else {
        //normal-way change of page (via link click)

        if ($route.current) {

            $window.history.replaceState({
                position: $rootScope.stackPosition
            });

            $rootScope.stackPosition++;

        }

    }

 });

Answer 3

对于ui-routing,我使用下面的代码.

在里面App.run(),使用

 $rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) 
 {

    if (toState.name === $rootScope.previousState )
       { 
          // u can any 1 or all of below 3 statements
         event.preventDefault();  // to Disable the event
         $state.go('someDefaultState'); //As some popular banking sites are using 
         alert("Back button Clicked");

       }
 else
      $rootScope.previousState= fromState.name;
   });

你可以在"$ stateChangeSuccess"事件'previousState的价值也一样,如果`你要如下.

    $rootScope.$on("$stateChangeSuccess", function (event, toState, toParams, fromState, fromParams) 
   {

        $rootScope.previousStatus = fromState.name;
    });