Question

我在AngularJS控制器中有以下命令

window.onunload = function () {
        connection.invoke("RemoveUser", playerName);
}

它已经通过了，因为我有一个纯粹的JS，这个语句运行良好，所以当我关闭选项卡或窗口时，现场一个angularJS控制器，它会触发并完成它的工作，但当我把它放在一个控制器内，它没有发射。有什么想法吗？

完整脚本吼叫

 angular.module("mathGameApp", []).controller("mathGameCtrl", function ($scope) {
            // Current player name
            $scope.playerName;
            $scope.welcomeIsVisible = true;
            $scope.gameAreaIsVisible = false;
            $scope.countdownIsVisible = false;

            // Create connection
            const connection = new signalR.HubConnectionBuilder()
                .withUrl("/MathGame")
                .configureLogging(signalR.LogLevel.Information)
                .build();

            // Get math challenge
            connection.on("GetChallenge", data => {
                // Bind challenge
                $scope.expression = data.expression + " = " + data.possibleResult;
                $scope.$apply();
            });


            // Receive and bind score
            connection.on("ReceiveScore", data => {
                $scope.score = data;
                $scope.$apply();
            });

            // Rise alert
            connection.on("RiseAlert", data => {
                alert(data);
            })

            // Get status that the player was added to game room
            connection.on("AddedToGameRoom", data => {
                $scope.welcomeIsVisible = false;
                $scope.gameAreaIsVisible = true;
                $scope.$apply();
            })

            connection.on("ChallengeFinished", data => {
                $scope.counter = 5;
                $scope.countdownIsVisible = true;
                $scope.$apply();

                let interval = setInterval(function () {
                    if ($scope.counter == 0) {
                        $scope.countdownIsVisible = false;
                        $scope.buttonIsDisabled = false;
                        $scope.$apply();
                        clearInterval(interval);
                        connection.invoke("RefreshChallenge");
                    }
                    $scope.counter--;
                    $scope.$apply();
                }, 1000);

            })

            // rise answer Correct/Wrong
            connection.on("RiseAnswer", data => {

                $scope.buttonIsDisabled = true;
                $scope.expression = data;
                $scope.$apply();
                console.log($scope.buttonsDisabled);
                console.log($scope.expression);
            })

            // Request the user to be added to game room
            $scope.enterGame = function (playerName) {
                connection.invoke("EnterGame", playerName);
            }


            $scope.answerQuestion = function (playerName, answer) {
                connection.invoke("AnswerQuestion", {
                    "playerName": playerName, "isCorrect": answer
                });
            }


            // Open connection
            connection.start().then(() => {

            }).catch((err) => {
                alert(err.toString())
            });


            window.onunload = function () {
                connection.invoke("RemoveUser", playerName);
            }


        })

Answer 1

控制器应使用$onDestroy生命周期挂钩来释放外部资源。

app.controller("mathGameCtrl", function ($scope) {
    ̶w̶i̶n̶d̶o̶w̶.̶o̶n̶u̶n̶l̶o̶a̶d̶ ̶=̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶)̶ ̶{̶ 
    this.$onDestroy = function () {
        connection.invoke("RemoveUser", playerName);
    }

})

有关详细信息，请参阅AngularJS $compile Service API Reference - Life-Cyle hooks。

更新

你可以和应该处理＆＃39;卸载＆＃39;事件通过window.addEventListener()。它允许为事件添加多个处理程序。这对于AJAX库，JavaScript模块或任何其他需要与其他库/扩展一起使用的代码特别有用。

有关详细信息，请参阅

window.onunload事件不会在AngularJS控制器内部触发

1 个答案:

更新