Событие window.onunload не запускается внутри контроллера AngularJS

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 Life-Cycle Hook для освобождения внешних ресурсов.

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 Справочник по API сервиса - ловушки Life-Cyle .

---

Обновление

Вы можете и должны обработать событие 'unload' с помощью window.addEventListener () .Это позволяет добавить более одного обработчика для события.Это особенно полезно для библиотек AJAX, модулей JavaScript или любого другого типа кода, который должен хорошо работать с другими библиотеками / расширениями.

Для получения дополнительной информации см.

• Справочник по MDN Web API - WindowEventHandlers.onunload
• Справочник по MDN Web API - EventTarget.addEventListener ()