AngularJS에서 사용자가 템플릿/페이지를 떠날 때 어떻게 감지합니까?

AngularJS에서 사용자가 템플릿/페이지를 떠날 때 어떻게 감지합니까?

Javascript 명령어 setInterval을 사용하고 있습니다.나는 사용자가 페이지를 떠날 때 그것을 멈추는 것을 좋아한다.

이 코드는 정상적으로 동작하고 있는 것 같습니다.http://jsfiddle.net/PQz5k/

유저가 페이지를 떠나는 것을 검출합니다.다른 HTML 페이지나 URL로 이동하기 위한 링크를 클릭하거나 페이지를 새로고침 할 때 Javascript 코드를 실행합니다.

단, Angular를 1개로 하면 동작하지 않습니다.JS 템플릿에서 다른 템플릿으로.예를 들어 template1.html에 있는 경우 사용자가 template1.html을 떠나 template2.html로 이동할 때 Javascript 코드가 Controller1.js에서 작업을 수행하도록 하겠습니다.아래의 AngularJS 코드와 동등한 것은 무엇입니까?

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

다음과 같은 템플릿마다 하나씩 두 개의 컨트롤러가 있는 것 같습니다.

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

템플릿에서 다른 템플릿으로 전환하면 $syslog라고 하는 이벤트가 발생합니다.이 이벤트는 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);
    });
}

이는 Controller_1의 $scope가 파기되면 이벤트가 호출되고 간격이 클리어됨을 의미합니다.

이는 템플릿을 남기는 경우(확인 대화상자도 표시됨)를 위한 것입니다.

             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);
                        }
                    }
                });
               }

UI 라우터를 사용하는 경우 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
        }]

    });

다음과 같이 워처를 사용하여 위치 경로가 변경된 시기를 확인할 수 있습니다.

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

그러면 이전 위치, 새 위치를 얻어서 기능이나 원하는 것을 실행할 수 있습니다.

언급URL : https://stackoverflow.com/questions/13885718/in-angularjs-how-to-detect-when-user-leaves-template-page