55

私は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...';
});​
4

4 に答える 4

143

次のように、テンプレートごとに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が破棄されると、イベントが呼び出され、間隔がクリアされることを意味します。

于 2012-12-17T15:51:50.060 に答える
12

これは、テンプレートを離れるときのためのものです（確認ダイアログも表示されます）。

             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);
                        }
                    }
                });
               }
于 2014-12-11T18:57:36.143 に答える
7

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

    });
于 2015-09-07T15:37:41.293 に答える
0

ウォッチャーを使用して、次のようにロケーションパスがいつ変更されたかを確認できます。

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

次に、古い場所と新しい場所を取得して、関数などを実行できます。

于 2015-04-15T18:52:48.073 に答える