javascript - 如何从 Angular 自定义表单控制指令中获取 a 的父表单？

Question

通常，angular 中的表单验证是这样完成的:

<form name="form">
  <input name="fruit" ng-model="ctrl.fruit" required>
  <span class="error" ng-show="form.fruit.$error.required">
    Fruit is required.
  </span>
</form>

问题是我有多种形式，其中一些具有相似的字段，所以我想将其中的一些逻辑重构为一个指令:

<form name="form1">
   <fruit-input></fruit-input>
</form>

<form name="form2">
   <fruit-input></fruit-input>
</form>

问题在于显示或隐藏字段错误消息的逻辑要求模板能够访问表单以评估条件 form.fruit.$error.required。但是我的 fruitInput 指令无论以何种形式插入都需要起作用。

有没有办法让指令识别其父表单，以便我可以在其(隔离)范围内使用它来显示/隐藏错误消息？

编辑(由于回复质疑问题的有用性):显然这个例子被简化了。

实际上，表单上的一个字段可能有以下许多内容:标签、帮助文本、悬停时的工具提示、文档链接、控件本身，以及针对不同验证条件的所有不同验证消息。其中一个控件很容易就是 20 行代码，并且可以在 4~5 个不同的地方使用。因此值得对其进行重构。

Answer 1

试试这个指令:

app.directive("fruitInput",function(){
  return {
    restrict:"E",
    template:'<input name="fruit" ng-model="ctrl.fruit" required> ' +
     ' <span class="error" ng-show="form.fruit.$error.required"> ' + //form here is the parent form resolved dynamically and saved in the scope as a property
     '  Fruit is required. ' +
     ' </span>',
     scope:{},
     require:"^form", //inject parent form as the forth parameter to the link function
     link:function (scope,element,attrs,form){
       scope.form = form; //save parent form
     }
  }
})

DEMO