В 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...';
});​

javascript angularjs setinterval
person Curt    schedule 14.12.2012    source источник
comment
Вы действительно переключаете полные страницы в корне html или переключаете шаблоны в ng-view?   -  person Brad Green    schedule 17.12.2012

Ответы (4)


arrow_upward
142
arrow_downward

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

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

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

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

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

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

person Mathew Berg    schedule 17.12.2012
comment
@ Мэтью Берг: Спасибо за вашу помощь! Это сработало. Однако теперь у меня есть другая проблема. В моем Controller1 есть несколько функций, которые выполняются разными кнопками / ссылками на Template1. Когда я нажимаю на эти ссылки, SetInterval все еще работает. Я даже поместил ClearInterval (myInterval) в функцию, которая вызывает SetInterval, но она по-прежнему не останавливает SetInterval. - person Curt; 20.12.2012
comment
Думаю, я нашел другую часть решения в stackoverflow.com/questions / 8476045 / how-to-stop-setinterval Мне нужно очистить переменную myInterval в верхней части контроллера, чтобы она была доступна для всех моих функций. - person Curt; 20.12.2012
comment
$scope.$on('$destroy') работает, но вы должны использовать $interval.cancel(myInterval);, чтобы сохранить угловой путь. - person chovy; 28.11.2013
comment
Вы должны уничтожить интервал, когда область видимости уничтожена, поэтому $ interval.cancel вам не поможет. Т.е. у вас есть представление с контроллером, которому постоянно нужно запускать интервал, и только когда вы покидаете представление, вы хотите, чтобы интервал остановился. - person Mathew Berg; 28.11.2013
comment
Отличный совет! Это делает такой приятный чистый способ обработки идентификаторов setInterval. Спасибо! - person tonejac; 11.07.2016

arrow_upward
12
arrow_downward

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

             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);
                        }
                    }
                });
               }
person JoMendez    schedule 11.12.2014

arrow_upward
7
arrow_downward

если вы используете 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
        }]

    });
person Pranay Dutta    schedule 07.09.2015

arrow_upward
0
arrow_downward

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

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

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

person Luis Saraza    schedule 15.04.2015