Question

我有以下指令用于警告用户，如果他们试图关闭窗口或导航而不保存他们的更改：

app.directive('dirtyTracking', ['$window', function ($window) {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attrs) {
            function isDirty() {
                var formObj = getProperty($scope, $element.attr('name'));
                return formObj && formObj.$pristine === false;
            }
            //So we can read string keys such as foo.bar and correctly
            //traverse the javascript object
            function getProperty(obj, prop) {
                var parts = prop.split('.'),
                    last = parts.pop(),
                    l = parts.length,
                    i = 1,
                    current = parts[0];

                while ((obj = obj[current]) && i < l) {
                    current = parts[i];
                    i++;
                }

                if (obj) {
                    return obj[last];
                }
            }

            function areYouSurePrompt() {
                if (isDirty()) {
                    return 'You have unsaved changes.';
                }
            }

            window.onbeforeunload = areYouSurePrompt;
            //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();
                }
            });
        }
    };
}]);

目前看来，这可行，但正如您所看到的，我必须明确设置window.onbeforeunload属性。这种方法的问题在于，如果我有其他指令想要在save事件上执行操作，那么它们就会相互冲突。

当我尝试使用window.addEventListener或$window.addEventListener时，该事件似乎无法正常工作。

单步执行调试器，代码执行输入areYouSurePrompt功能，执行返回字符串，但是在我之前没有提示确认对话框窗户关闭。

我知道我可以使用保存window.onbeforeunload当前值的方法，但我想弄清楚为什么使用addEventListner并不按预期工作。< / p>

在指令中注册beforeunload事件

0 个答案: