web-dev-qa-db-ja.com

AngularJSでは、ユーザーがテンプレート/ページを離れたときに検出する方法は？

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...';
});​
javascriptangularjssetinterval
53
Curt

次のようなテンプレートごとに1つずつ、2つのコントローラーがあると思います。

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が破棄されると、イベントが呼び出され、間隔がクリアされることを意味します。

137
Mathew Berg

これは、テンプレートを離れるときに使用します（確認ダイアログを表示します）。

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

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

    });
6
Pranay Dutta

ウォッチャーを使用して、次のような場所のパスが変更されたことを確認できます。

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

次に、古い場所と新しい場所を取得して、関数または必要なものを実行できます。

0
Luis Saraza