Angularjs 无法在指令中获取$error.maxlength验证

我正在创建一个指令，将带有文本类型输入的模板添加到视图中。在该指令中，如果文本字段输入超过提供的最大长度设置，我将尝试添加span类以进行错误通知。我有一个类似这样的代码：

<div ng-app="app">
<form name="userForm" ng-submit="processForm()" novalidate>
    <div use-text-box name="xyz" ng-maxlength="10" required> </div>

    <button type="submit" class="btn btn-success">Submit</button>
</form>
</div>   

var app = angular.module('app', []);

app.directive('useTextBox', function() {

              return {
                  replace:true,
                  compile: function(element,attrs) {

                        var name =  attrs.name;

                        var maxLengthError = attrs.hasOwnProperty('ngMaxlength') ? '<span ng-show="userForm.' + attrs.name + '.$error.maxlength" class="help-block">Text is too long. The limit is ' + attrs.ngMaxlength + ' characters.</span>' : '';

                        var htmlText = '<input type="text" name="' + name + '" ng-maxlength="' + attrs.ngMaxlength + '" required />' + 
                                            maxLengthError;

                        element.replaceWith(htmlText);

                }
              };
});

提交

我的指令是这样的：

<div ng-app="app">
<form name="userForm" ng-submit="processForm()" novalidate>
    <div use-text-box name="xyz" ng-maxlength="10" required> </div>

    <button type="submit" class="btn btn-success">Submit</button>
</form>
</div>   

var app = angular.module('app', []);

app.directive('useTextBox', function() {

              return {
                  replace:true,
                  compile: function(element,attrs) {

                        var name =  attrs.name;

                        var maxLengthError = attrs.hasOwnProperty('ngMaxlength') ? '<span ng-show="userForm.' + attrs.name + '.$error.maxlength" class="help-block">Text is too long. The limit is ' + attrs.ngMaxlength + ' characters.</span>' : '';

                        var htmlText = '<input type="text" name="' + name + '" ng-maxlength="' + attrs.ngMaxlength + '" required />' + 
                                            maxLengthError;

                        element.replaceWith(htmlText);

                }
              };
});

var-app=angular.module（'app'，[]）；
app.directive（'useTextBox'，function（）{
返回{
替换：正确，
编译：函数（元素、属性）{
var name=attrs.name；
var maxLengthError=attrs.hasOwnProperty（'ngMaxlength'）？'文本太长。限制为'+attrs.ngMaxlength+'个字符。'：''；
var htmlText=''+
最大长度误差；
元素。替换为（htmlText）；
}
};
});

但是在上面的代码中，指令正在生成输入文本字段等。。没问题。但是，如果最大长度超过10，则不会显示错误消息。我做错了什么？

---

下面是指向上述示例的JSFIDLE的链接：

我不知道您是否只是在学习并试图理解指令，但您甚至不需要指令来完成您想要的任务

这是一把没有指令的小提琴：

编辑：以下是使用您的指令方法的修复方法

EDIT：下面是另一个仅使用指令的

compile

属性的示例

---

我猜您的示例与本示例之间的区别似乎在于表单控制器的引入。

jsiddle说，

invalidError没有定义。

。你测试过了吗？对不起。。。我以前有另一个变量

invalidError

，当我删除它时，我忘了从

htmlText

中删除它。我现在已经更新了JSFIDLE。但这并不是错误验证不显示的原因。我还没有弄明白为什么验证还不起作用。这个指令有各种各样的问题。首先，如果要使用

element.replaceWith

或

element.HTML

将HTML代码插入DOM，则首先需要使用

$compile

和正确的范围编译它。第二，不需要使用指令的compile属性，compile属性应该返回一个带有两个函数的对象来进行指令前和指令后的链接。实际上，我是从@Misko Hevery post这里得到这个想法的：@m.e.conroy你能给我举个例子说明如何正确地做吗？作为一名新手，我非常依赖直观的例子（创建指令的原因是，我将在许多不同类型的表单中创建类似的字段。唯一需要更改的是标签、ng模型、maxlength等。为了避免重复相同的代码，我发现创建一个带有属性的指令来分别生成模板似乎是一种更好的方法。我展示的示例在我的帖子中是一个简化的。我遇到的主要问题是

$error。当它是from指令时，maxlength

不起作用。但是当我直接在表单中使用而不使用指令时，它就起作用了。我不明白为什么指令验证不起作用。是的，我回去尝试让你的指令起作用，但似乎validat在创建表单控制器后，ion无法处理插入表单中的元素。我甚至无法使

$dirty

正常工作。我发现，您必须让表单控制器在表单创建后识别新添加的元素。我将在一分钟内发布修复程序。@blackops\u程序员用您的directiv编辑了这篇文章e fix。你是对的。对我来说，这似乎是一段缓慢的旅程，但一旦我了解Angular是如何将结构和它们彼此沟通的方式分开的，它就会变得更加有趣和有趣。我刚刚查看了你的博客，你有一些关于Angular的精彩信息和演示。喜欢它！

app.directive('useTextBox', function($compile,$timeout) {

          return {
              replace:true,
              scope: false,
              link: function(scope,element,attrs) {

                    var name =  attrs.name;

                    var maxLengthError = attrs.hasOwnProperty('ngMaxlength') ? '<span ng-show="userForm.' + attrs.name + '.$error.maxlength" class="help-block">The limit is ' + attrs.ngMaxlength + ' characters.</span>' : '';

                  var htmlText = '<div><input type="text" id="' + name + '" name="' + name + '" ng-maxlength="' + attrs.ngMaxlength + '" ng-model="test_' + attrs.name + '" required>' +   maxLengthError + '</div>';

                  $compile(htmlText)(scope,function(_element,_scope){
                    element.replaceWith(_element);
                  });

            } // end link
          };
});

$compile(htmlText)(scope,function(_element,_scope){
    element.replaceWith(_element);
});