javascript - AngularJS 在 Controller 中检测浏览器后退按钮按下？

Question

我正在制作一个浏览器问答游戏，我有一个 View ，其中经过身份验证的玩家选择了一个游戏类型，它发出一个 socket.io 事件由我的 Node.js 服务器处理，然后将路径更改为“搜索当服务器等待足够多的人加入配对队列时，带有加载图标的游戏”屏幕。我在此页面上放置了一个“取消”按钮，这将向我的服务器发出另一个 socket.io 事件，以将用户从匹配队列中删除。

现在问题来了，如果用户在他们的浏览器中按下后退按钮，则没有按下取消按钮，因此不会调用 cancelSearch() 函数，因此不会将 socket.io emit 发送到服务器从搜索队列中删除用户。这是相关代码...我相信我必须在我的 matchsearchCtrl.js 文件中添加一些代码才能处理后退按钮按下并相应地调用 cancelSearch()..

playgame.html

<div class="container">
    <h1>Select your Game Type!</h1>
    <button class="btn btn-default btn-block" ng-click="startMatchMaking()">1v1</button>
    <button class="btn btn-default btn-block" ng-click="startMatchMaking()">2v2</button>
</div>

playgameCtrl.js

angular.module('myApp')
.controller('playgameCtrl', function($scope, $rootScope, $uibModal, socket, $location) {

    $scope.startMatchMaking = function() {
        socket.emit('joinMatchMaking', $rootScope.user.username);
        $location.path('/searching');
    }

});

ma​​tchsearch.html

<div class="container">
    <h1>Searching for players...</h1>
    <button class="btn btn-danger btn-large" ng-click="cancelSearch()">Cancel</button>
</div>

匹配搜索Ctrl.js

angular.module('myApp')
.controller('matchsearchCtrl', function($scope, $location, socket) {

    $scope.cancelSearch = function() {
        socket.emit('leaveMatchMaking', $rootScope.user.username);
        $location.path('/home');
    }
})

如果需要的话...

app.routes.js

myApp.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: './app/views/landingpage.html',
        controller: 'landingpageCtrl'
    })
    .when('/home', {
        templateUrl: './app/views/home.html',
        controller: 'homeCtrl'
    })
    .when('/play', {
        templateUrl: './app/views/playgame.html',
        controller: 'playgameCtrl'
    })
    .when('/searching', {
        templateUrl: './app/views/matchsearch.html',
        controller: 'matchsearchCtrl'
    })
    .otherwise('/');
});

Answer 1

您可以使用 JavaScript window.onbeforeunload 不仅可以检测后退按钮，还可以检测用户是否离开页面，例如关闭窗口。

window.onbeforeunload = function() {
    //Do your stuff here
}

---

编辑

使用 $scope.$on("$locationChangeStart",function(){//Do your stuff here}); 检测页面变化。