Javascript 链接函数的参数元素

我有以下指令：

.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.hasClassng-dirty或form.$dirty不起作用，代码仍然非常难看。。。我还认为访问元素[0]是不正确的

我真的很感谢你的帮助

---

谢谢

您应该依赖FormController

因此，您可以做什么：

添加要求：“^ngForm”以请求表单控制器作为链接函数的参数 将另一个参数添加到类似formCtrl的链接函数中 使用formCtrl.$dirty

---

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

您应该依赖FormController

因此，您可以做什么：

添加要求：“^ngForm”以请求表单控制器作为链接函数的参数 将另一个参数添加到类似formCtrl的链接函数中 使用formCtrl.$dirty 如果您不清楚，请使用指令创建plunker示例，我将尝试对其进行这些更改。

来自：

如果指定了name属性，则表单控制器将发布到 此名称下的当前作用域

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

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

从：

如果指定了name属性，则表单控制器将发布到 此名称下的当前作用域

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

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