Question

我想访问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}}

Answer 1

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

Answer 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

Answer 3

为输入控件构建HTML时，请确保根据作为属性传入的“nameinput”正确附加name属性：

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="' + attr.nameinput +'" ng-model="data.text" placeholder="type here..." required />');

      }
   };
});

验证添加了指令的表单

3 个答案: