AngularJSでのwindow.onbeforeunloadの等価性。

Question

通常のJavaScriptにはwindow.onbeforeunloadがあります。 HTML5ルートでAngularJSをエミュレートするにはどうすればよいですか？

$ beforeRouteChangeがありますが、私が知る限り、イベントをキャンセルすることはできません。

明確にする：window.onbeforeunloadは、ページから離れてナビゲートするためには動作しますが、ページ内ナビゲーションでは動作しません。 1つのコントローラから別のコントローラにHTML5履歴APIを介してアクセスするだけです。

Answer 1

キャンセル可能なイベントは$locationChangeStartです。

まだ文書化されていないので、$routeサービスにどのような影響があるかを説明する単体テストがあります。 https://github.com/angular/angular.js/blob/v1.0.1/test/ng/routeSpec.js#L63

これは、window.onbeforeunloadのようなユーザーには確認できません。同じ効果を得るには、独自のダイアログサービスを用意して場所変更プロセスを再開する必要があります（または、同期$window.confirmを使用するだけで済みます）。

Answer 2

これを追加します。

$scope.$on('$destroy', function() { 
    window.onbeforeunload = undefined; 
}); 
$scope.$on('$locationChangeStart', function(event, next, current) { 
    if(!confirm("Are you sure you want to leave this page?")) { 
     event.preventDefault(); 
    } 
}); 

Answer 3

あなたは、角-UI-ルータを使用している場合は、$stateChangeStartの代わり$locationChangeStartを使用する必要があります。

Answer 4

UI-Routerバージョン1.0.0以上を使用する場合、$stateChangeStartではなく$transitions.onStartを使用してください。ドキュメントtransition hooksを参照してください。 $stateChange*イベントは、バージョン1.0.0（source）のよう推奨されていません

：

すべての状態イベント、（すなわち$stateChange*や友人）今 を非推奨となり、デフォルトでは無効になっています。イベントをリスンする代わりに、 Transition Hook APIを使用してください。トランジション（source）を中止する

例コード：

$transitions.onStart({}, function(transition) { 
    if (transition.to().name === 'unreachable') { 
    return false; 
    } 
}