链接函数的参数elem

Parameter elem of the linking function

本文关键字：elem 参数 函数 链接      更新时间：2023-09-26

我有以下指令:

.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")或form.$dirty()不起作用…我也认为访问elem[0]是不正确的…

我真的很感激你的帮助!

谢谢! !

来自AngularJS表单doc:

如果指定了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.";
                }
            }
        }
    };
});

你应该依赖于FormController (http://docs.angularjs.org/api/ng.directive:form.FormController)

那么你能做的是:

  1. 添加"require: '^ngForm'" to request form controller"作为链接函数的参数
  2. 为链接函数添加另一个参数(类似于formCtrl)
  3. 使用formCtrl.$dirty

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

相关文章：