Angularjs 验证不起作用（指令作用域。$error未填充，尽管ng无效类应用于DOM元素）

更新：另外，如果有人能告诉我如何简化我的代码，我将不胜感激

简而言之： 我对元素应用了简单的验证规则

<div ng-form='myForm'>
 <input ng-model='row.item[0].field' required />
</div>

当我从输入框中删除值时，它的背景色会改变，但是

行

和

行.item

，

行.item[0]

和

行.item[0]。字段

有

$error

属性出现

myForm.$error

也没有任何内容

因此，我无法在下面的输入框中打印验证消息

详细解释：

我可能有比这更广泛的问题。这是我的设置（简化）：

标记：

代码：

函数tableCtrl（$scope）{
变量字段=$scope.fields=[
{name:'events'，必需：true}
，{name:'subjects'}
，{name:'受影响'}]
$scope.events=[{名称：'e'，类型：'some'，器官：'blood'
，项目：[{事件：1，受试者：2，受影响者：3}
，{事件：1，受试者：2，受影响者：3}
，{事件：1，受试者：2，受影响者：3}]}
，{名称：'f'，类型：'any'，器官：'heart'
，项目：[{事件：1，受试者：2，受影响者：3}
，{事件：1，受试者：2，受影响者：3}
，{事件：1，受试者：2，受影响者：3}]}
，{名称：'g'，类型：'all'，器官：'skin'
，项目：[{事件：1，受试者：2，受影响者：3}
，{事件：1，受试者：2，受影响者：3}
，{事件：1，受试者：2，受影响者：3}]]
}
角度.module（'components'）。指令（'editor'，函数（$compile）{
返回{
范围：{
行：'=编辑器'
，字段：'=字段'
},        
终端：是的，
链接：函数（范围、元素、属性）{
var tmpl=''
for（第行项目中的var g）{
var itemPath='row.items['+g+']
for（scope.fields中的变量f）{
tmpl+=''
}             
}   
var newElement=angular.element（tmpl）；
$compile（新元素）（范围）；
元素。替换为（新元素）；
}        
}

---

因此，我正在动态创建输入框。

验证与ng form和ng model指令相关，这意味着您需要一个

元素或

尝试在父作用域上编译新元素，而不是在孤立的作用域上。它在我的案例中起作用

$compile(newElement)(scope.$parent);

我可能需要更新我的问题，我的标记和formCtrl中有
。$error没有任何内容。
function tableCtrl($scope) {

   var fields  = $scope.fields = [
       { name: 'events', required: true }
      ,{ name: 'subjects' }
      ,{ name: 'affected'}]

   $scope.events = [{ name : 'e', type :'some', organ :'blood'
                  , items : [{ events : 1, subjects: 2, affected : 3 }
                             ,{ events : 1, subjects: 2, affected : 3 }
                             ,{ events : 1, subjects: 2, affected : 3 } ] }
                 , { name:'f', type : 'any', organ :'heart'
                    , items :[{ events : 1, subjects: 2, affected : 3 }
                             ,{ events : 1, subjects: 2, affected : 3 }
                             ,{ events : 1, subjects: 2, affected : 3 } ]}
                 , { name: 'g', type: 'all', organ :'skin'
                    , items : [{ events : 1, subjects: 2, affected : 3 }
                             ,{ events : 1, subjects: 2, affected : 3 }
                             ,{ events : 1, subjects: 2, affected : 3 } ]}]

}
angular.module('components').directive('editor', function ($compile) {
return {
    scope : {
        row : '=editor'          
        , fields : '=fields'
    },        
    terminal:true,

    link: function (scope, element, attrs) {
       var tmpl = ''

       for (var g in row.items ) {
           var itemPath = 'row.items['+g+']'
            for (var f in scope.fields) {
                tmpl += '<td><input type="number" ng-model="'+itemPath+'.'+scope.fields[f].name + '"' +
                  ' min="0"  ' +
                    (scope.fields[f].required? ' required ' : '' )+                           
                    ' /></td>'
            }             
       }   

       var newElement = angular.element(tmpl);
       $compile(newElement)(scope);
       element.replaceWith(newElement); 
    }        
}

<form name="myform">
    <input ng-model='row.item[0].field' required />
    <input type="submit" ng-disabled="myform.$error" value="Save" />
</form>

$compile(newElement)(scope.$parent);