58

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

ページ v1 と v2 に 2 つのリンクがあります。リンクをクリックすると、特定のページに移動します。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'});
}]);

ユーザーがv1をクリックしたときに、「彼が続行したい場合は、v1から離れようとしています」というメッセージをポップアップ表示したいと思います.v2をクリックしても同じです。これを達成する方法についての指針をいただければ幸いです。

ここで答えを得ましたが、時間間隔ごとにメッセージがポップアップします。

更新されたコード;

コントローラー

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 = [];
4

6 に答える 6

106

確認ダイアログのコードは、次のように短く記述できます。

$scope.$on('$locationChangeStart', function( event ) {
    var answer = confirm("Are you sure you want to leave this page?")
    if (!answer) {
        event.preventDefault();
    }
});
于 2013-08-21T11:04:06.753 に答える
45

あなたの質問を分けましょう。あなたは2つの異なることについて尋ねています：

1.

ユーザーがブラウザウィンドウを閉じようとしたときに警告する検証を作成しようとしています。

2.

ユーザーがv1をクリックしたときに、「彼が続行したい場合は、v1から離れようとしています」というメッセージをポップアップ表示したいと思います.v2をクリックしても同じです。

最初の質問については、次のようにします。

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();
        }
    });
}
于 2013-02-11T12:04:19.803 に答える
22

これが私が使用するディレクティブです。フォームがアンロードされると、自動的にクリーンアップされます。プロンプトが表示されないようにする場合 (たとえば、フォームが正常に保存された場合)、$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();
                }
            });
        }
    };
}]);
于 2014-04-04T15:11:22.263 に答える
9

上記でわかったように、window.onbeforeunloadとを組み合わせて使用​​し$locationChangeStartて、ユーザーにメッセージを送信できます。さらにngForm.$dirty、ユーザーが変更を加えたときにのみメッセージを送信するために利用できます。

任意のフォームに適用できる angularjs ディレクティブを作成しました。このディレクティブは、変更を自動的に監視し、ユーザーがページをリロードしたり移動したりした場合にユーザーにメッセージを送信します。@参照 https://github.com/facultymatt/angular-unsavedChanges

このディレクティブがお役に立てば幸いです。

于 2013-08-22T15:46:49.173 に答える
2

ここにある他の例は、古いバージョンの ui-router (>=0.3.x) で正常に動作しますが、 などのすべての状態イベントは 1.0 で廃止されまし$stateChangeStartた。新しい ui-router 1.0 コードは$transitions サービスを使用します。したがって、コンポーネントに挿入してから、以下のコードが示すよう に$transitions.onBeforeメソッドを使用する必要があります。$transitions

$transitions.onBefore({}, function(transition) {
  return confirm("このページを離れてもよろしいですか?");
});

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

于 2016-12-28T14:31:19.193 に答える