Question

我正在尝试编写一个指令来对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 我开始使用（请参阅下面的更新）

我无法弄清楚如何获取用于ng-show的表单名称。另外，生成的输入元素之后没有必要的类添加角度，例如ng-pristine，ng-invalid等。

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

更新上面的掠夺者是错的。它太旧了。我正在处理一个我即将发布的更新。

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

Answer 1

我回答了自己的问题。是的，这可以做到。我接近编译方法。我只需要解决一些小问题。 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();
            }
        }

具有错误辅助跨度元素的输入元素的指令

1 个答案: