角JS指令显示警报浏览器的后退按钮时，在形式上未保存的数据 [英] Angular js directive to show alert for browser back button when unsaved data in form

问题描述

我是一个新手，angularjs.Is有什么办法来显示警报时，窗体有未保存的数据和用户presses浏览器后退按钮。
如何做到这一点任何指针将AP preciated。

更新：

  angular.module（'myApp.directives'，[]）。指令（confirmOnExit'，函数（）{
    返回{
        链接：功能（$范围，ELEM，ATTRS）{
            $范围。在（'$ locationChangeStart'，函数（事件，接下来，电流）{$                如果（$ scope.myForm。$脏）{
                    如果（！确认（啊形式是脏的，做ü要继续吗？））{
                        。事件preventDefault（）;
                    }
                }
            }）;            window.onbeforeunload =功能（）{
                警报（'我'）;
                如果（$ scope.myForm。$脏）{
                    返回的形式是肮脏的。
                }
            }
        }
    };
}）;
 

更新code

  angular.module（'myApp.directives'，[]）。指令（confirmOnExit'，函数（）{
    返回{
        链接：功能（$范围，ELEM，ATTRS，$​​ rootScope）{
            window.onbeforeunload =功能（）{
                如果（$ scope.myForm。$脏）{
                    返回你想留在网页上？
                }
            }            $ rootScope。$腕表（功能{
                返回$ location.path（）;
            }，            功能（为newValue，属性oldValue）{
                如果（为newValue！= OLDVALUE）{
                    //这里你可以做你的工作
                }其他{}
            }，
            真正）;            $范围。在（'$ locationChangeStart'，函数（事件，接下来，电流）{$
                如果（$ scope.myForm。$脏）{
                    如果（！确认（的形式是脏的，你想留在网页上？））{
                        。事件preventDefault（）;
                    }
                }
            }）;
        }
    };
}）;
 

解决方案

是的，我只是给这个<一个href=\"http://stackoverflow.com/questions/14890784/fire-a-callback-when-route-is-changed-animations-loaders-stacking-different-v/14893923#14893923\">answer有些分钟前给其他用户，创建于根范围级别的手表赶上位置变化：

  $ rootScope。$表（函数（）{//固定函数声明
   返回$ location.path（）;
   }，
   功能（为newValue，属性oldValue）{
      如果（为newValue =属性oldValue！）{//更新：变量名的情况下应该是相同的
         //这里你可以做你的工作
      }
      其他{
      }
   }，
   真正）;
 

I'm a newbie to angularjs.Is there any way to show alert when a form has unsaved data and user presses browser back button. Any pointers to how to achieve this would be appreciated.

Update: :

    angular.module('myApp.directives', []).directive('confirmOnExit', function() {
    return {
        link: function($scope, elem, attrs) {


            $scope.$on('$locationChangeStart', function(event, next, current) {

                if ($scope.myForm.$dirty) {
                    if(!confirm("Ahh the form is dirty, do u want to continue?")) {
                        event.preventDefault();
                    }
                }
            });

            window.onbeforeunload = function(){
                alert('me');
                if ($scope.myForm.$dirty) {
                    return "The Form is Dirty.";
                }
            }
        }
    };
});

Updated code

    angular.module('myApp.directives', []).directive('confirmOnExit', function () {
    return {
        link: function ($scope, elem, attrs, $rootScope) {
            window.onbeforeunload = function () {
                if ($scope.myForm.$dirty) {
                    return " do you want to stay on the page?";
                }
            }

            $rootScope.$watch(function {
                return $location.path();
            },

            function (newValue, oldValue) {
                if (newValue != oldvalue) {
                    // here you can do your tasks
                } else {}
            },
            true);

            $scope.$on('$locationChangeStart', function (event, next, current) {
                if ($scope.myForm.$dirty) {
                    if (!confirm("The form is dirty, do you want to stay on the page?")) {
                        event.preventDefault();
                    }
                }
            });
        }
    };
});

解决方案

Yes, I just gave this answer some minutes ago to another user, create a watch at root scope level to catch location changing:

$rootScope.$watch(function() { // fixed function declaration
   return $location.path();
   },  
   function(newValue, oldValue) {  
      if (newValue != oldValue) { // Update: variable name case should be the same
         // here you can do your tasks
      }
      else {
      }
   },
   true);

这篇关于角JS指令显示警报浏览器的后退按钮时，在形式上未保存的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！