В AngularJS, как определить, когда пользователь покидает шаблон/страницу?

Я использую команду Javascript: setInterval. Мне нравится останавливать его, когда пользователь покидает страницу.

Этот код работает хорошо: http://jsfiddle.net/PQz5k/

Определяет, когда пользователь покидает страницу. Он выполняет Javascript-код, когда пользователь нажимает на ссылку, чтобы перейти на другую HTML-страницу или URL-адрес, или если пользователь перезагружает страницу.

Однако он не работает, когда я перехожу из одного шаблона AngularJS в другой. В качестве примера, если я нахожусь в template1.html, я хочу, чтобы код Javascript что-то делал в Controller1.js, когда пользователь покидает template1.html, чтобы перейти к template2.html. Что эквивалентно этому коду ниже в AngularJS?:

$(window).on('beforeunload', function() {
    return 'Your own message goes here...';
});

Ответы

Ответ 1

Я думаю, у вас есть два контроллера: по одному для каждого шаблона:

function Controller_1($scope...){
    ...
}
function Controller_2($scope...){
    ...
}

Ну, когда вы переключаетесь с одного шаблона на другой, происходит событие, которое запускается с именем $destroy, вы можете прочитать его здесь http://docs.angularjs.org/api/ng.$rootScope.Scope#$destroy

Скажем, я переключаюсь с шаблона с помощью Controller_1 на шаблон с помощью Controller_2. Controller_1 имеет интервал, который я хотел бы остановить. Вы можете выполнить это с помощью:

function Controller_1($scope, $interval...){
    var myInterval = $interval(...);
    $scope.$on("$destroy", function(){
        $interval.cancel(myInterval);
    });
}

Это будет означать, что когда объект $scope для Controller_1 будет уничтожен, событие будет вызываться и интервал будет очищен.

Ответ 2

Это, когда вы оставляете шаблон (также запрашиваете диалог подтверждения):

             function Controller_1($scope...){
               var myInterval = setInterval(...);
               $scope.$on('$locationChangeStart', function (event, next, current) {
                    console.log(current);

                    if (current.match("\/yourCurrentRoute")) {
                        var answer = confirm("Are you sure you want to leave this page?");
                        if (!answer) {
                            event.preventDefault();
                        }else{
                            clearInterval(myInterval);
                        }
                    }
                });
               }

Ответ 3

если вы используете ui-router, тогда вы можете использовать свойство onExit, свойство

    $stateProvider.state('foo', {
        url: '/foo',        
        templateUrl: 'views/foo.html',    
        controller: 'fooController',
        onExit: ['$fooService', function($fooService) => {
            $fooService.hide();//do what u want to do here
        }]

    });

Ответ 4

Вы можете использовать наблюдателя, чтобы проверить, изменился ли путь местоположения, примерно так:

$scope.$watch(function(){
    return $location.path();
}, function(newPath, oldPath){
   //...Do something
})

Затем вы можете получить старое местоположение и новое местоположение и выполнить функцию или что угодно,