在同一页面上多次使用的自定义指令中进行验证 (AngularJS)

Question

我创建了一个包含相关输入和下拉列表的自定义指令。我还使用隔离作用域将外部作用域正确绑定到内部作用域以协助两个数据绑定，这也允许我在同一页面上多次使用相同的指令。到目前为止一切正常。我的下一个问题是如何在指令中处理验证。

我不能再使用类似

的东西了

ng-show="formName.controlname.$invalid && !formname.controlname.$pristine"

出于以下两个原因，

我的指令不必担心外部形式。
因为我在同一页面上两次使用相同的指令，所以使用语法 formName.controlname 实际上会映射到两个不同的控件。

关于此的一些想法在这一点上会有所帮助。我在这里错过了什么？

Answer 1

你绝对不应该让你的指令依赖于表单名称。您应该做的是提供一个父表单指令依赖项，以便您可以在指令 link 函数中使用它的控制器：

.directive('yourDirective', function() {
    return {
        require: '^form',
        link: function(scope, element, attrs, formController) {
            // use formController.$errors object
        }
    };
});

Answer 2

也许你应该在你的指令中进行验证。

创建双向绑定范围成员的副本（假设这些绑定到表单输入）以检查原始性和撤消能力。

Answer 3

感谢您的反馈，但我发现使用 ng-form 可以满足我的要求。

所以在我的指令标记中我添加了：

   <div ng-form="[some name]">
     .......
   </div>

这样做让我可以继续使用 ng-* 属性。

现在我可以在我的指令中这样做：

ng-show="somename.controlname.$invalid && !somename.controlname.$pristine"

它是独立的，所以我不必担心跨越任何界限。我可以一遍又一遍地添加控件，并且每个指令的验证保持不变。

在同一页面上多次使用的自定义指令中进行验证 (AngularJS)

Validation in a custom directive that is used multiple times on the same page (AngularJS)

javascript

angularjs

angularjs-directive