0

我正在尝试创建一堆可重用的组件，主要是表单控件。

出于这个原因，我相信（也许有不同的方法？）我需要为ng-form指令创建动态名称，这样它就不会覆盖ng-form同一范围内的另一个。

问题是我无法进行验证，因为表达式不适用于ng-messages.

下面是一个非常简化的演示（对于长模板字符串感到抱歉，找不到更好的方法将其添加到 stacksnippets 中），只有一个指令实例，没有其他父范围。但在实际场景中，它们会在那里，所以我正在动态创建表单名称。

angular.module('test', ['ngMessages'])
  .directive('formGroup', function() {
    return {
      scope: {
        classList: '='
      },
      replace: true,
      template: '<div class=\"container\" ng-class=\"classList\" ng-form=\"fg_{{$id}}\"><input type=\"text\" name=\"testInput\" ng-model=\"testValue\"  required><div ng-messages=\"fg_$id.$error\"><p ng-message=\"required\">Something is wrong!<\/p><\/div><\/div>'
    }
  });
div.container {
  height: 100px;
  padding: 5px;
  border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-messages.js"></script>
<div ng-app="test">
  <form-group classList="sample-class"></form-group>
</div>

如您所见，我正在使用$id带前缀的范围创建表单名称fg_。但它不起作用ng-messages="fg_$id.$error"并ng-messages="fg_{{$id}}.$error"引发错误。

这样做的正确方法是什么，或者如果不是，我们如何绕过它？

PS：我读过这个问题，一些类似的问题和文章，但没有一个回答这个简单的场景

4

2 回答 2

1

尝试使用this['fg_' + $id].$error作为参数的ngMessages指令。

你可以在这里找到工作的 jsfiddle 。

于 2016-04-12T18:17:07.597 回答
0 

angular.module('test', ['ngMessages'])
  .directive('formGroup', function() {
    return {
      scope: {
        classList: '='
      },
      replace: true,
      template: '<div class=\"container\" ng-class=\"classList\" ng-form=\"fg_{{$id}}\"><input type=\"text\" name=\"testInput\" ng-model=\"testValue\"  required><div ng-messages=\"this[\'fg_\' + $id].$error\"><p ng-message=\"required\">Something is wrong!<\/p><\/div><\/div>'
    }
  });
div.container {
  height: 100px;
  padding: 5px;
  border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-messages.js"></script>
<div ng-app="test">
  <form-group classList="sample-class"></form-group>
</div>

于 2016-04-12T18:23:34.307 回答