web-dev-qa-db-ja.com

event.preventDefault（）がangularjsアプリのrouteChangeStartで機能しない

どんなangularjsの達人がこれで私を助けることができることを願っています。これが私のangularjsコードです

_$scope.$on('$routeChangeStart', function(event, next, current) {
                if ($scope.myForm.$dirty) {
                    if(!confirm("Unsaved, do u want to continue?")) {
                        event.preventDefault();
                    }
                }
            });
_

データがダーティの場合、ブラウザの戻るボタンのクリックで警告しますが、キャンセルまたはOKをクリックしても、ルートの変更は完了します。event.preventDefault()が機能していないようです。何が悪いのか誰かが指摘できますか

javascriptroutesangularjsangularjs-directive
14
iJade

これを見つけるのに多くの問題がありましたが、「$ routeChangeStart」イベントの代わりに、「$ locationChangeStart」イベントをリッスンできます。これにより、デフォルトを防ぐことができます。

$scope.$on("$locationChangeStart", function(event, next, current) {
    if (!confirm("You have unsaved changes, continue navigating to " + next + " ?")) {
        event.preventDefault();
    }
});

また、常にデフォルトを防ぎ、「次へ」を保存し、クリーンなJSモーダルを表示して、非同期で決定することもできます。

$ locationChangeStartは現在文書化されていませんが、ここで参照されています： https://github.com/angular/angular.js/issues/2109

32
Zorglub

Angular 1.3.7 https://code.angularjs.org/1.3.7/docs/api/ngRoute/service/ $ routeの直後に修正

$ routeChangeStartルート変更前にブロードキャストされます。この時点で、ルートサービスは、ルート変更が発生するために必要なすべての依存関係の解決を開始します。通常、これには、ビューテンプレートと、resolverouteプロパティで定義された依存関係のフェッチが含まれます。すべての依存関係が解決されると、$ routeChangeSuccessが起動されます。

ルートの変更（およびそれをトリガーした$ locationの変更）は、イベントのpreventDefaultメソッドを呼び出すことで防ぐことができます。イベントオブジェクトの詳細については、$ rootScope.Scopeを参照してください。

5
Roy Calderon

AngularJSによると docs （$ Broadcastで参照）あなたは単にcannotタイプbroadcastのイベントをキャンセルすることができません（ $ routeChangeStart はそのタイプです）：

イベントのライフサイクルは、$ broadcastが呼び出されたスコープから始まります。このスコープで名前イベントをリッスンしているすべてのリスナーに通知が届きます。その後、イベントは現在のスコープのすべての直接および間接スコープに伝播し、途中ですべての登録済みリスナーを呼び出します。イベントはキャンセルできません。

3
F Lekschas

この問題は、最新バージョン（> = 1.3.8）で修正されました。

$ routeChangeStartに提供される引数はより詳細である（そして多くの場合より有用である）ので、可能であれば、angular version .. ..

2
Marcelo C.

$stateProviderを使用している場合、問題が解決しない可能性があります。この場合、以下を使用します。

$scope.$on('$stateChangeStart', function( event){
  .....
  event.preventDefault();
});
0
john