带有错误辅助跨度元素的输入元素指令答案

【问题标题】：Directive for input element with error assistance span elements带有错误辅助跨度元素的输入元素指令
【发布时间】：2014-04-23 21:08:11
【问题描述】：

我正在尝试编写一个指令来对 IP 地址进行输入验证。

我在网上看到很多类似这个样板代码的例子：

 <label>IP Address 1:</label>
 <input ng-model="formData.ip1" required name="ip1" type="text" 
        placeholder='xxx.xxx.xxx.xxx'
        ng-pattern = "/^(\d{1,3}\.){3}(\d{1,3})$/">
 <span ng-show="myForm.ip1.$error.required" style="color:red"> * </span>
 <span ng-show="myForm.ip1.$dirty && myForm.ip1.$invalid" style="color:red">
       This is an invalid IP.</span>

由于这需要在几十个地方，并且由于验证规则和指示错误的方式可能会改变，我想使用这样的指令：

 <label>IP Address A:</label>
 <input ng-model="formData.ipa" required my-ip-validator>

myIpValidator 指令将添加属性（如 ng-pattern）和额外元素（如跨度）

我尝试了几种方法。我最新的是一个编译指令，例如从这里Add directives from directive in AngularJS 我开始了一个 plunker （请参阅下面的更新）

我不知道如何获取表单名称以在 ng-show 中使用。另外，生成的输入元素没有后期通过angular添加的必要类，例如ng-pristine、ng-invalid等。

我该怎么做？我愿意解决这个指令的问题或完全不同的方法。

更新： 上面的笨蛋是错误的。它很旧。我正在处理更新，我很快就会发布。

更新 2： 我想出了一些可行的方法。 Plunker http://plnkr.co/edit/efnfMWprVH91hQnzYkX7?p=preview 我错过了将 $compile 传递给函数。而且，它的另一部分是从一些 DOM 检查中获取表单名称。我现在将其清理并改进它。但如果有人有其他建议，我愿意学习。这是我的第一个指令。

【问题讨论】：

看看我在这个问题上的回答，它可能会给你一些想法。 stackoverflow.com/questions/22493774/…
aet - 感谢您的想法。但是，我希望将跨度放在指令输入之后。因为，例如，如果有人决定跨度应该在输入之前，我将不得不在几十个地方修改它。显然，我在这方面投入了很多时间，以至于现在搜索和修改会更有效率。但是，我仍然很好奇它是否可以做到，并希望将来能学到一些对我有帮助的东西。

标签： angularjs angularjs-directive

【解决方案1】：

我正在回答我自己的问题。是的，这是可以做到的。我很接近编译方法。我只需要解决一些小问题。 Plunker http://plnkr.co/edit/efnfMWprVH91hQnzYkX7?p=preview 它以前不起作用，因为我没有将 $compile 传递给指令。而且，我不知道如何获取表单和输入名称。

我是这样做的：

        var inputname = element.attr("name"),
            foundForm = false,
            ancestor = element.parent();

        while (!foundForm && ancestor) {                
            if ( angular.uppercase(ancestor.prop("tagName")) == "FORM" ) {
                foundForm = true;
                var formname = ancestor.attr("name");
            } else {
                ancestor = ancestor.parent();
            }
        }

【讨论】：