javascript - 用于在离开/关闭页面之前检测未决更改的 AngularJS 指令

Question

我有一个问题。我有一张注册表和许多其他表格。 现在我想检查表单是否脏了，如果他们真的想离开/关闭此页面，我会带上一个确认框。
首先，当我使用浏览器的后退按钮而不是其他按钮([按钮..] 仅 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 指令，这样我就不必为每个有表单的站点复制这段代码。 (每个页面只有一个表单，但是每个表单的名字都不一样!)
我的 Controller 在单独的 javascript 文件中，(函数 blablaController() {})，我在我的配置文件中为每个 routeProvider 传递这个(templateUrl:blabla.html， Controller :blabalController)

问候，
炭疽病

Answer 1

这是回答您问题的服务和指令。您可能考虑对其进行的唯一更改是在服务中使用 $window 而不是 window。如说明所述，您只需将属性 unsaved-changes-warning 添加到您的表单。

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