ユーザーがページを去るときにangularjsに警告を表示

Question

私はangularjsの新しい蜂です。私は彼がブラウザウィンドウを閉じようとしたときにユーザに警告する検証を書こうとしています。

私は自分のページv1とv2に2つのリンクを持っています。特定のページにかかるリンクをクリックしました。ここ は、私は、ユーザーがクリックすることで、「彼は継続したいならば、彼は、V1から去ることを約だ」というv1と同じでクリックしたときにメッセージをポップアップ表示したいv1とv2

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']) 

.config(['$routeProvider', function($routeProvider) { 
     $routeProvider.when('/v1', {templateUrl: 'pages/v_1.html', controller: MyCtrl1}); 
     $routeProvider.when('/v2', {templateUrl: 'pages/v_2.html', controller: MyCtrl2}); 
     $routeProvider.otherwise({redirectTo: '/v1'}); 
}]); 

にリダイレクトするためのコードですv2で これを達成するためのどのような指針をいただければ幸いです。

回答はhereですが、時間間隔ごとにメッセージがポップアップします。

更新コード;

コントローラ

function MyCtrl1() { 
    $scope.$on('$locationChangeStart', function (event, next, current) { 
     if ('your condition') { 
      event.preventDefault(); 

      MessageService.showConfirmation(
       'Are you sure?', 
      MessageService.MessageOptions.YES_NO, { 
       'YES': function() { 
        blockNavigation = false; 
        $location.url($location.url(next).hash()); 
        $rootScope.$apply(); 
       }, 
       'NO': function() { 
        MessageService.clear(); 
        $log.log('NO Selected') 
       } 
      }); 
     } 
    }); 
} 
MyCtrl1.$inject = []; 


function MyCtrl2() {} 
MyCtrl2.$inject = []; 

Answer 1

電子の確認ダイアログがこのように短く書くことができます：あなたは上記の発見した通り

$scope.$on('$locationChangeStart', function(event) { 
    var answer = confirm("Are you sure you want to leave this page?") 
    if (!answer) { 
     event.preventDefault(); 
    } 
}); 

Answer 2

あなたの質問を区切ることができます、次の2つの異なるものについて尋ねている：

1.

私は警告検証を書き込むしようとしていますユーザーが を入力してブラウザウィンドウを閉じようとすると、

2.

私は V2をクリックする上で、ユーザーがV1をクリックしたときに、「彼は継続したい場合は、V1から出発するのに約 のだ」というメッセージをポップアップ表示したいと同じ。最初の質問については

、それをこのように実行します。

window.onbeforeunload = function (event) { 
    var message = 'Sure you want to leave?'; 
    if (typeof event == 'undefined') { 
    event = window.event; 
    } 
    if (event) { 
    event.returnValue = message; 
    } 
    return message; 
} 

そして、2番目の質問について、このようにそれを実行します。

あなたはにフックアップするために$locationChangeStartイベントを処理する必要があります移行イベントを表示するので、このコードを使用して、コントローラの移行検証を処理してください：

function MyCtrl1($scope) { 
    $scope.$on('$locationChangeStart', function(event) { 
     var answer = confirm("Are you sure you want to leave this page?") 
     if (!answer) { 
      event.preventDefault(); 
     } 
    }); 
} 

Answer 3

、あなたがメッセージにユーザーをwindow.onbeforeunloadと$locationChangeStartの組み合わせを使用することができます。さらに、ngForm.$dirtyを利用すると、ユーザーが変更を加えたときにのみメッセージを送信することができます。

私はanglejsディレクティブを書いています。これは、自動的に変更を監視し、ページをリロードしたり離れたりするとユーザーにメッセージを送るフォームに適用できます。 @see https://github.com/facultymatt/angular-unsavedChanges

このディレクティブは便利です。

Answer 4

ここに私が使用する指示があります。フォームがアンロードされると自動的にクリーンアップされます。プロンプトが表示されないようにするには（たとえばフォームが正常に保存されたため）、$ scope.FORMNAME。$ setPristine（）を呼び出します。ここで、FORMNAMEは、プロンプトを禁止するフォームの名前です。ここ

.directive('dirtyTracking', [function() { 
    return { 
     restrict: 'A', 
     link: function ($scope, $element, $attrs) { 
      function isDirty() { 
       var formObj = $scope[$element.attr('name')]; 
       return formObj && formObj.$pristine === false; 
      } 

      function areYouSurePrompt() { 
       if (isDirty()) { 
        return 'You have unsaved changes. Are you sure you want to leave this page?'; 
       } 
      } 

      window.addEventListener('beforeunload', areYouSurePrompt); 

      $element.bind("$destroy", function() { 
       window.removeEventListener('beforeunload', areYouSurePrompt); 
      }); 

      $scope.$on('$locationChangeStart', function (event) { 
       var prompt = areYouSurePrompt(); 
       if (!event.defaultPrevented && prompt && !confirm(prompt)) { 
        event.preventDefault(); 
       } 
      }); 
     } 
    }; 
}]); 

Answer 5

他の例としては、$stateChangeStartようなUI-ルータの古いバージョン（> = 0.3.x）が、すべての状態イベントのため正常に動作し、deprecated as of 1.0です。新しいui-router 1.0コードは$transitions serviceを使用しています。したがって、あなたのコンポーネントにを注入し、$transitions.onBeforeメソッドを使用すると、以下のコードが示すようになります。

 
$transitions.onBefore({}, function(transition) { 
    return confirm("Are you sure you want to leave this page?"); 
}); 

これは単なる単純な例です。 $transitionsサービスは、約束などのより複雑な応答を受け入れることができます。詳細については、HookResult typeを参照してください。

Answer 6

$scope.rtGo = function(){ 
      $window.sessionStorage.removeItem('message'); 
      $window.sessionStorage.removeItem('status'); 
     } 

$scope.init = function() { 
      $window.sessionStorage.removeItem('message'); 
      $window.sessionStorage.removeItem('status'); 
     }; 

リロードページ：INIT