Question

 <FORM>
 <DIV class="outer-class">
      <INPUT class="toValidate" type = "text"/>
      <INPUT class="somethingElse" type= "text"/>
      <INPUT class="toValidate" type ="text"/>
 </DIV>
 <DIV class="outer-class">
      <INPUT class="toValidate" type = "text"/>
      <INPUT class="somethingElse" type= "text"/>
      <INPUT class="toValidate" type ="text"/>
 </DIV>
 <INPUT type="submit"/>
 </FORM>

我的问题是：如何确保表单有效，嵌套的toValidates具有唯一值但只在同一个外部div中？我猜这个逻辑应该放在OuterClassDirective中，但我似乎无法弄清楚逻辑应该是什么样的？

任何建议都将受到赞赏。

谢谢！

Answer 1

Angular主页上的'tabs'和'pane'指令解决了类似的问题 - 子'窗格'指令需要与父'tabs'指令进行通信。

在outerclass指令上定义一个控制器，然后在控制器上定义一个方法（使用this而不是$ scope）。然后在toValidate指令中require: '^outerclass'。在toValidate链接函数中，您可以监视值更改并调用外部类控制器上的方法以传递值。在outerclass指令中进行验证。

另见'this' vs $scope in AngularJS controllers。

Answer 2

这个怎么样？您的outerClassDirective应该有一个控制器，它将使用的值存储在数组中。它将在其正文中转换输入字段。你的toValidate指令需要outerClassDirective并将模型值添加到数组中，如果存在则使其无效。

这是一个尝试（未经测试）：

app.directive('outerClass', function() {
   var values = [];
   var valid = true;
   return {
      template: '<div ng-transclude></div>',
      transclude: true,
      replace: true,
      require: 'ngModel',
      controller: function() {
         this.addValue: function(value) {
            valid = values.indexOf(value) > -1;
            values.push(value);
         };
      },
      link: function(scope, elm, attrs, ctrl) {
         ctrl.$setValidity('toValidate', valid)
      }
   };
});

app.directive('toValidate', function() {
   return {
        require: '^outerClass',
        link: function(scope, elm, attrs, ctrl) {
           ctrl.addValue(attrs.value);
        } 
      }
   };
});

使用angularjs在给定嵌套级别的字段上强制使用Case Insensitive unique

2 个答案: