AngularJS директива за откриване на чакащи промени преди напускане/затваряне на страницата

Аз имам проблем. Имам форма за регистрация и много други форми. Сега искам да проверя дали формулярът е мръсен и след това извеждам поле за потвърждение, ако наистина искат да напуснат/затворят тази страница.
Първо, когато се върна с бутона за връщане назад на браузъра, а не с другия бутон ([button..] само 4 примера) полето за потвърждение се показва два пъти и след две потвърждения все още съм на същата страница, само формулярът се нулира. Когато натисна своя, всичко работи добре.
Второ, когато затворя браузъра, се показва моето поле за потвърждение и след това полето за потвърждение на браузърите също се показва, но искам само един от тях.

$scope.$on('$locationChangeStart', function (event, next, current) {
    if ($scope.requestForm.$dirty) {
        if (!$window.confirm('Unsaved Changes, leave Page?')) {
            //cancel leaving view2
            //works when clicking links, but doesn't work when using the back button
            event.preventDefault();
        }
    } else {

    }
});

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

window.onbeforeunload = function (e) {
    if (window.myGlobalDirtyFlag === true) {
        if (!$window.confirm('Unsaved Changes, close Page?')) {
            //cancel leaving view2
            //works when clicking links, but doesn't work when using the back button
            return false;
        } else {

        }
    }
};

$scope.$on("$destroy", function () {
    window.myGlobalDirtyFlag = false;
});

Може ли някой също да има идея как да внеса това в AngularJS директива, така че да не се налага да копирам този код за всеки сайт, където имам формуляр. (Всяка страница има само 1 формуляр, но всяко име на формуляр е различно!)
Моите контролери са в отделни javascript файлове (функция blablaController() {}) и подавам това на routeProvider в моя конфигурационен файл (templateUrl: blabla .html, контролер: blabalController)

Поздрави,
Anthrax


person Anthrax    schedule 15.10.2013    source източник
comment
защо не го добавите към основния обхват?   -  person lucuma    schedule 15.10.2013
comment
Е, трябва да кажа, че не съм много добър в работата с rootScope и директиви без пример.. :/ Мислех си да получа формата като var form = $('button[type=submit]').closest( форма); или нещо подобно и добавете този параметър, за да работи за всяка форма..   -  person Anthrax    schedule 15.10.2013


Отговори (1)


Ето услуга и директива, които отговарят на вашия въпрос. Вероятно единствената промяна, която може да обмислите да направите, е използването на $window вместо прозорец в услугата. Както се казва в инструкциите, вие просто ще добавите атрибута unsaved-changes-warning към вашия формуляр.

https://github.com/facultymatt/angular-unsavedChanges

person lucuma    schedule 15.10.2013