在AngularJS中，如何檢測用戶何時離開模板/頁面？

Question

我正在使用Javascript命令：setInterval。 我喜歡在用戶離開頁面時停止它。

這段代碼似乎運行良好： http ： //jsfiddle.net/PQz5k/

它可以檢測用戶何時離開頁面。 當用戶單擊鏈接以轉到其他HTML頁面或URL，或者用戶重新加載頁面時，它會執行Javascript代碼。

但是，當我從一個AngularJS模板轉到另一個模板時，它不起作用。 舉個例子，如果我在template1.html，當用戶離開template1.html轉到template2.html時，我希望Javascript代碼在Controller1.js中執行某些操作。 AngularJS中下面這段代碼的等價物是什么？：

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

Answer 1

我認為你有兩個控制器，每個模板一個，如下所示：

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

好吧，當你從一個模板切換到另一個模板時，會發生一個名為$ destroy的事件，你可以在這里閱讀http://docs.angularjs.org/api/ng.$ro​​otScope.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時，將調用該事件並清除間隔。

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

Answer 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
        }]

    });

Answer 4

您可以使用觀察程序檢查位置路徑何時更改，如下所示：

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

然后，您可以獲取舊位置，新位置並執行功能或任何您想要的功能，