1

我是 angularjs 的新手。当表单有未保存的数据并且用户按下浏览器后退按钮时，有什么方法可以显示警报。任何有关如何实现这一目标的指针将不胜感激。

更新： ： 

    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.";
                }
            }
        }
    };
});

更新代码

    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();
                    }
                }
            });
        }
    };
});
4

2 回答 2

3

是的，我刚刚在几分钟前向另一个用户提供了这个答案，在根范围级别创建一个监视以捕捉位置变化：

$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);
于 2013-02-15T12:18:05.100 回答
1

正如您所发现的，您可以编写一个自定义指令来监视更改。您更新的代码正在按计划进行，但是您可以做一些改进：

  1. 您的指令按名称引用表单，这限制了它的可重用性。例如，如果您想在名为 的表单上使用相同的指令myOtherForm怎么办？当前使用$scope.myForm.$dirty限制了这种灵活性。相反，更好的方法是在链接函数中绑定到 formController。

  2. 真的不需要看$location.path()，因为绑定到$locationChangeStart会做同样的事情。

我编写了一个 angularjs 指令，您可以使用我上面讨论过的方法。@see https://github.com/facultymatt/angular-unsavedChanges

希望您发现此指令内容丰富。随意学习它，甚至在您的项目中使用它。

于 2013-08-22T15:59:55.183 回答