1

次のようなシナリオがあります。

  1. ブラウザのリロード、
  2. タブを閉じる
  3. ブラウザを閉じる
  4. ルートの変更 (リンクをクリックするなど)
  5. ブラウザの戻るボタンがクリックされました。または history.go(-1)。Macbook では 3 本の指でスワイプします。

ユーザーが何らかのフォームに記入したり、執筆の途中である場合は、これを防止したいと考えています。

このコードは問題なく動作しますが、複数のテキストフィールドに実装できない場合はまったく役に立ちません。現在、#/write url にいるかどうかのみをチェックします。入力をチェックしません。

これに対処する角度のある方法は何ですか? ターゲットのテキストフィールドを確認する最良の方法は何ですか? ディレクティブは解決策ですか? 何かのようなもの：

<input type="text" warningOnLeave ng-model="title"/>

また

<form warningOnLeave name="myForm">...</form>


 $rootScope.$on('$locationChangeStart', function(event, current, previous){

    console.log(current);
    console.log(previous);
    // Prevent route change behaviour
    if(previous == 'http://localhost/#/write' && current != previous){
        var answer = confirm ("You have not saved your text yet. Are you sure you want to leave?");
        if (!answer)
            event.preventDefault();     
    }

});




/** 
   Prevent browser behaviour
*/

window.onbeforeunload = function (e) {
    if(document.URL == 'http://localhost/#/write'){
        e = e || window.event;

        // For IE and Firefox prior to version 4
        if (e) {
            e.returnValue = 'You have not saved your text yet.';
        }

        // For Safari
        return 'You have not saved your text yet.';
    }
    else
        return;
}
4

1 に答える 1

1

Angular のフォームには、ユーザーがフォーム コントロールを操作したかどうかを示す$dirty/プロパティと、付随するメソッドがあります。この機能に基づいて、必要な機能を作成します。検討：$pristine$setPristine()

<form name="theForm" ng-controller="TheCtrl" ...>

これにより、フォームが指定された名前でコントローラーのスコープに配置されます。次に、次のようなもの:

controller("TheCtrl", function($scope, $rootScope) {
    $rootScope.$on('$locationChangeStart', function(event, current, previous) {
        if( $scope.theForm.$dirty ) {
            // here goes the warning logic
        }
    });
});

必要に応じて呼び出すことを忘れないでください$scope.theForm.$setPristine()(つまり、提出またはクリアされた後)。

ウィンドウのアンロードの場合、$dirtyフラグを監視する必要があります。したがって、前のコントローラーでは次のようになります。

$scope.$watch("theForm.$dirty", function(newval) {
    window.myGlobalDirtyFlag = newval;
});

window.onbeforeunloadイベントはフォームのスコープにアクセスできないため、これを行う必要があります。次に、アプリのグローバル セクションで次のようにします。

window.onbeforeunload = function (e) {
    if( window.myGlobalDirtyFlag === true ) {
        // warning logic here
    }
};

繰り返しますが、スコープが破棄されたときにグローバルダーティフラグをクリアしたい場合があるため、コントローラーで次のようにします。

$scope.$on("$destroy", function() {
    window.myGlobalDirtyFlag = false;
});
于 2013-10-09T07:18:52.877 に答える