Question

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

出于这个原因，我相信（也许这有不同的方法吗？）我需要为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"那样有效。

这样做的正确方法是什么，或者如果没有，我们如何解决这个问题？

P.S：我读过this question，一些类似的文章，但没有一个回答这个简单的场景

Answer 1

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

你可以找到工作的jsfiddle here。

Answer 2

＆＃13;

Send #a ;Sends Windows button + A to open the action center
Sleep, 750 ; Give it some time to slide open
ImageSearch, FoundX, FoundY, 0, 0, A_ScreenWidth, A_ScreenHeight, C:\Connect.png ;Try to find the Connect button tile
if ErrorLevel = 2
    MsgBox Could not conduct the search for the connect button in action center. Make sure your search image is in the correct location.
else if ErrorLevel = 1
    MsgBox Connect button cannot be found on the screen.
else
    MoveMouseAndClick(FoundX, FoundY)
Sleep, 1250 ;Delay so the wireless displays have a chance to load into the Action Center window
ImageSearch, FoundX, FoundY, 0, 0, A_ScreenWidth, A_ScreenHeight, C:\WirelessDisplay.png
if ErrorLevel = 2
    MsgBox Could not conduct the search for the wireless display. 
else if ErrorLevel = 1
    {   
        ;Search image cannot be found. Try 1 more time in case it took a long time for the wireless displays to appear 
        Sleep, 750
        ImageSearch, FoundX, FoundY, 0, 0, A_ScreenWidth, A_ScreenHeight, C:\WirelessDisplay.png ;try to find the first Wireless Display device listed
        if ErrorLevel = 1
            MsgBox Wireless display image cannot be found on the screen. Make sure the wireless device is turned on.
        else
            MoveMouseAndClick(FoundX, FoundY)
    }
else
    MoveMouseAndClick(FoundX, FoundY)
Send {Esc} ;Send Esc to get rid of the Action Center window
Return

MoveMouseAndClick(x, y) {
    MouseMove, x + 25, y + 25 ;Move it down the right a bit to make sure we click the button
    Sleep, 250 
    MouseClick, left
}

＆＃13;

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>'
    }
  });

＆＃13;

div.container {
  height: 100px;
  padding: 5px;
  border: 1px solid;
}

＆＃13;

使用ng-messages验证动态表单

2 个答案: