修改

Question

我正在制作浏览器琐事游戏，我有一个视图，其中经过身份验证的玩家选择游戏类型，它发出一个由我的Node.js服务器处理的socket.io事件，然后将路径更改为＆＃34 ;寻找游戏＆＃34;带有加载图标的屏幕，因为服务器等待足够的人加入匹配队列。我放了一个＆＃34;取消＆＃34;此页面上的按钮，它将向我的服务器发出另一个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');
    }

});

matchsearch.html

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

matchsearchCtrl.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});检测网页更改。

AngularJS检测控制器中的浏览器后退按钮按下？

1 个答案:

修改