Question

编辑：PLUNKR已更新并证明了问题！

我觉得我的设计存在缺陷，但我做了以下事情:(问题的简化示例：）

.directive('awesomeInput', function($log, $compile) {
    return {
        scope: {
            'ngModel': '='
        },
        link: function(scope, elem, attrs) {
            elem.prepend(angular.element('<input type="text" ng-model="ngModel" name="awesome" required>'));
           $compile(elem.contents())(scope);
        }
    };
});

如果我在表单中使用awesomeInput，我遇到的问题是，似乎没有对表单属性执行验证程序，如ng-minlength =“0”或者必需。

<form>
   <div awesome-input ng-model="formData.awesome"></div>   <!-- this won't validate properly -->
   <input type="text" ng-model="formData.first_name" required name="first_name">  <!-- this does -->
</form>

以下是plunkr：http://plnkr.co/edit/K7jsWOY6S7nxCMW0g3aC

要重现错误，只需注意您可以在第一个输入中输入少于6个字符，并且在您取消对焦时不会显示任何错误。第二个输入确实显示错误。如果你检查html（查看页面源代码），你会发现它们都有相同的标记，应该可以工作......

似乎问题与指令模板有关。如果将错误视图标记从指令模板中取出并放入index.html，它实际上会正确显示错误。

关于我应该做什么的任何想法？

Answer 1

你的指令也有这里显示的模板：

        template: '<div class="text-danger registrationError center-block" ng-show="form.awesome.$dirty && form.awesome.$invalid"><div ng-show="form.awesome.$error.minlength">MINLENGTH</div></div>'

哪个回复表格。但由于你的指令有一个孤立的范围，它的行为并不像你期望的那样。简单地将表单传递给指令似乎可以解决问题：http://plnkr.co/edit/TlgXH0mDf6nzj4v3fTiG?p=preview

// In isolate scope
'form': '='
// On directive form="form"

现在他们都有MINLENGTH错误。

编辑：解决命名问题。

这实际上是一个非常酷的bug。事实证明，命名很重要，因为如果指令的优先级相同，它会按字母顺序对它们进行评估！这意味着如果您的指令在ng-model之前按字典顺序排列，例如＆＃34; awesome＆＃34;，它将首先评估您的指令。但如果它之后，就像＆＃34;出汗＆＃34;它会先做ng模型。

为了解决这个问题，对于任何名称，您只需要为指令添加一个高于默认优先级（ng-model使用）为0的优先级。

priority: 1,

这是一个可以使用的plnkr：http://plnkr.co/edit/y6jQa0NilQcgv0WcSCUH?p=preview

你在那里发现真的很酷！

希望这有帮助！

表单输入验证不适用于角形式（带有plunker）

1 个答案: