Question

我有以下指令：

.directive('confirmOnExit', function () {
    return {link: function ($scope, elem, attrs) {
            window.onbeforeunload = function () {
                if ($scope.contextForm.$dirty) {
                    return "Unsaved data detected.";
                }
            }

        }
    };
}
)

正如您所看到的，该指令编写得不是很好，因为它直接引用了“contextForm”形式。

我想要的是更通用的东西（所以我也可以在其他形式上使用它）：

.directive('confirmOnExit', function ($window) {
    return {link: function ($scope, elem, attrs) {

            // Make sure code is only executed if directive is place on a form
            // Should I even do this here??
            if (elem[0].tagName == "FORM") {

                var form = elem[0];

                $window.onbeforeunload = function () {

                if (form.className.indexOf("ng-dirty") > -1) {
                    return "Unsaved data detected.";
                }
            }

        }
    };
}
)

你会注意到代码仍然非常难看，因为form.hasClass（“ng-dirty”）或表单。$ dirty（）不起作用...我也认为访问elem [0]不是正确...

我真的很感激一些帮助！

谢谢！

Answer 1

您应该依赖FormController（http://docs.angularjs.org/api/ng.directive:form.FormController）

所以你能做什么：

将“require: '^ngForm'"添加到请求表单控制器作为链接功能的参数
将另一个参数添加到您的链接功能（formCtrl）
使用formCtrl.$dirty

如果您不清楚，请使用指令创建plunker示例，我将尝试对其进行更改。

Answer 2

来自AngularJS form doc：

如果指定了name属性，则将表单控制器发布到这个名称下的当前范围。

因此，您可以使用$eval属性上的name访问该控制器：

.directive('confirmOnExit', function () {
    return {
        link: function ($scope, elem, attrs) {
            var formCtrl = $scope.$eval(attrs.name);
            window.onbeforeunload = function () {
                if (formCtrl.$dirty) {
                    return "Unsaved data detected.";
                }
            }
        }
    };
});

链接函数的参数elem

2 个答案: