验证添加了指令的表单答案

【问题标题】：validation of a form added with a directive验证添加了指令的表单
【发布时间】：2014-02-06 15:34:08
【问题描述】：

我想访问 AngularJS 为表单提供的验证变量的内容。我需要使用代码中的指令添加表单，但如果这样做，我将无法再访问 $dirty,$error,$invalid 变量，我需要访问它们。

JS：

myApp.directive('test', function() {
  return {
    scope : {
      nameform: "=",
      nameinput: "=",
      type: "="
    },
    template: '<form name=nameform></form>',
    restrict: 'E',
    compile: function (elem,attr){
      var form = elem.find("form");
      if(attr.type == "text")
        form.html('<input type="text" name="nameinput" ng-model="data.text" placeholder="type here..." required />');

    }
  };
});

HTML：

<test nameform="valform" nameinput="valinput" type="text"/>
{{valform.valinput.$invalid}}

【问题讨论】：

标签： angularjs validation angularjs-directive angularjs-scope

【解决方案1】：

我认为你不能。因为您使用隔离范围来构建指令，所以您无法访问信息。您可以尝试使用共享范围构建您的指令，我认为您将能够访问此信息。

【讨论】：

以哪种方式？你有什么建议吗？
你能显示生成指令的 html 吗？

【解决方案2】：

将您的指令更改为 ng-form 而不是 form（因为 ng-form 是可嵌套的）。然后将您的指令包装在另一个表单元素中并为该新表单元素命名。外部表单元素将绑定到您的外部范围，您可以通过这种方式访问属性。

指令模板：

"<ng-form name="valform"></ng-form>"

HTML：

  <body ng-view>
    <div>Valid: {{outerform.$valid}}</div>
    <div>Errors: {{outerform.$error}}</div>
    <form id="outerform" name="outerform">
    <test type="text"/>
    </form>
  </body>

附注，表单名称不能很好地与动态名称配合使用。下面的 plunkr 使用静态名称，因此我可以帮助您解决当前的问题。我在另一篇 SO 帖子上找到了动态名称问题的解决方案……我想这个…… Dynamic validation and name in a form with AngularJS

这是您的工作表格的 plnkr... http://plnkr.co/edit/RFrRXp2kWkP1Mefwl3Kn?p=preview

【讨论】：

谢谢，但我还需要将表格放在表格的单元格中，表格是用 ng-repeat 制作的。如果我将测试元素放在中，它就不再起作用了。
我需要查看控制器中的 $scope 元素，例如 $scope.mainform.innerform1.$dirty、$scope.mainform.innerform2.$dirty 等……我的大问题现在有是给每个表格一个不同的名字
我不得不用表单和 ng-repeat 解决同样的问题，每个内部表单都有不同的名称。这就是我创建另一个名为“dynamicName”的指令的地方，它允许我为 ng-repeat 的每次迭代为内部形式分配不同的名称。我的每个项目都有一个与之关联的 UUID，所以我使用每个项目的 UUID 作为每个内部表单的名称......以及使用 UUID 作为每个输入字段的名称。所以，我最终让每个输入字段都有自己的 ng-form，然后是整个内容的父表单。
这是一个带有 ng-repeat 和一个表格的示例。 plnkr.co/edit/RFrRXp2kWkP1Mefwl3Kn