Angularjs 无法使用指令隔离作用域绑定角度验证错误
我的总体目标是将所有可重用的小部件组件化为angular指令，但我在尝试生成angular form错误消息指令时遇到了困难。我读过很多帖子，但不知道如何做到这一点 我所有的指令都有独立的作用域 我的主要问题是，我不知道如何使pattern属性正确绑定到at error message directives span元素的ng show属性，以便错误消息根据模式动态隐藏\shows 外部HTML是：Angularjs 无法使用指令隔离作用域绑定角度验证错误,angularjs,directive,Angularjs,Directive,我的总体目标是将所有可重用的小部件组件化为angular指令，但我在尝试生成angular form错误消息指令时遇到了困难。我读过很多帖子，但不知道如何做到这一点 我所有的指令都有独立的作用域 我的主要问题是，我不知道如何使pattern属性正确绑定到at error message directives span元素的ng show属性，以便错误消息根据模式动态隐藏\shows 外部HTML是： <body ng-controller="atVrmLookup"> <
<body ng-controller="atVrmLookup">
<ng-form name="vrmForm" novalidate>
<at-input name="registration" label="Registration" required model="vrmLookup.registration" minlength="3"></at-input>
<at-error-message pattern="vrmForm.registration.$error.required" message="Please enter a registration"></at-error-message>
</ng-form>
</body>
任何帮助都将不胜感激。输入名称不能是角度绑定表达式。相反，请使用模板函数并生成模板字符串：
template: function($element, $attr) {
return '<div><label>{{label}}</label><div>' +
'<input name="' + $attr.name + '" type="text" ng-model="model" ng-minlength="{{minlength}}"/>' +
'</div></div>';
}
然后在模板中：
template: '<div><label>{{label}}</label><div><input dynamic-name="{{name}}" type="text" ng-model="model" ng-minlength="{{minlength}}"/></div></div>',
模板：“{{label}}”，
注意：这个解决方案之所以有效，是因为幸运的是，ngForm提供了编程访问来定制其行为。若ngForm的控制器并没有公开API，那个么您可能是SOL。考虑从您自己的自定义指令的控制器公开的API是一种很好的做法，您永远不知道其他指令如何使用它。谢谢。只是几个后续问题。这架飞机是为了演示。我不能使用该表达式的根本技术原因是什么？atInput和atErrorMessage指令的HTML将位于它们自己的HTML文件中，并将使用templateUrl检索。必须这样，因为它们是可重用的组件。我能想到的保持这种方式的唯一方法是将html文件加载到$templateCache中，并使用简单的字符串.replace（）将表达式{{name}}替换为实际的属性值。有更好的方法吗？角度测量有三个阶段：1。编译2。链接3。提供。绑定表达式在渲染阶段解析。但是，用于验证目的的表单范围变量的设置是在链接阶段设置的。它们不能是绑定表达式，因为必须在链接时知道名称。我认为另一种解决方案是在链接函数var input=element.find（'input'）中添加这两行代码；输入属性（“名称”，属性名称）
并从HTML模板中省略name属性。对不起，我指的是编译
函数，而不是link函数。啊，是的，在角度编译器之前修改HTML-第三个很好的选择。
template: function($element, $attr) {
return '<div><label>{{label}}</label><div>' +
'<input name="' + $attr.name + '" type="text" ng-model="model" ng-minlength="{{minlength}}"/>' +
'</div></div>';
}
.directive("dynamicName",[function(){
return {
restrict:"A",
require: ['ngModel', '^form'],
link:function(scope,element,attrs,ctrls){
ctrls[0].$name = scope.$eval(attrs.dynamicName) || attrs.dynamicName;
ctrls[1].$addControl(ctrls[0]);
}
};
}])
template: '<div><label>{{label}}</label><div><input dynamic-name="{{name}}" type="text" ng-model="model" ng-minlength="{{minlength}}"/></div></div>',