文字
分享

AngularJS: API: ngMessages/directive/ngMessages


ngMessages

  1. - directive in module ngMessages

ngMessages is a directive that is designed to show and hide messages based on the state of a key/value object that it listens on. The directive itself compliments error message reporting with the ngModel $error object (which stores a key/value state of validation errors).

ngMessages manages the state of internal messages within its container element. The internal messages use the ngMessage directive and will be inserted/removed from the page depending on if they're present within the key/value object. 默认情况下, only one message will be displayed at a time and this depends on the prioritization of the messages within the template. (This can be changed by using the ng-messages-multiple on the directive container.)

A remote template can also be used to promote message reuseability and messages can also be overridden.

点击这里 to learn more about ngMessages and ngMessage.

指令信息

  • 这个指令执行优先级为0.

用法

1

2

3

4

5

6

7

8

9

<code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, &apos;Courier New&apos;, monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;"><span style="box-sizing:border-box;color:rgb(153, 153, 136);"><!-- using attribute directives --></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></span><span style="box-sizing:border-box;color:navy;"><ANY</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-messages</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"expression"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><ANY</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-message</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"keyValue1"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">...</span><span style="box-sizing:border-box;color:navy;"></ANY></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><ANY</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-message</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"keyValue2"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">...</span><span style="box-sizing:border-box;color:navy;"></ANY></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><ANY</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-message</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"keyValue3"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">...</span><span style="box-sizing:border-box;color:navy;"></ANY></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></span><span style="box-sizing:border-box;color:navy;"></ANY></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

 

</span><span style="box-sizing:border-box;color:rgb(153, 153, 136);"><!-- or by using element directives --></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></span><span style="box-sizing:border-box;color:navy;"><ng-messages</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">for</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"expression"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><ng-message</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">when</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"keyValue1"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">...</span><span style="box-sizing:border-box;color:navy;"></ng-message></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><ng-message</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">when</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"keyValue2"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">...</span><span style="box-sizing:border-box;color:navy;"></ng-message></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><ng-message</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">when</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"keyValue3"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">...</span><span style="box-sizing:border-box;color:navy;"></ng-message></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></span><span style="box-sizing:border-box;color:navy;"></ng-messages></span></code>

参数

参数 类型 详述
ngMessages string

an Angular表达式 evaluating to a key/value object (this is typically the $error object on an ngModel instance).

ngMessagesMultiple | multiple
(可选)
string

when set, all messages will be displayed with true

ngMessagesInclude | include
(可选)
string

when set, the specified template will be included into the ng-messages container

示例

index.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, &apos;Courier New&apos;, monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;"><span style="box-sizing:border-box;color:navy;"><form</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">name</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"myForm"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><label></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">Enter your name:</span><span style="box-sizing:border-box;color:navy;"></label></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><input</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">Type</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"text"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

         </span><span style="box-sizing:border-box;color:teal;">name</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"myName"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

         </span><span style="box-sizing:border-box;color:teal;">ng-model</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"name"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

         </span><span style="box-sizing:border-box;color:teal;">ng-minlength</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"5"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

         </span><span style="box-sizing:border-box;color:teal;">ng-maxlength</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"20"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

         </span><span style="box-sizing:border-box;color:teal;">required</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:navy;">/></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

 

  </span><span style="box-sizing:border-box;color:navy;"><pre></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">myForm.myName.$error = {{ myForm.myName.$error | json }}</span><span style="box-sizing:border-box;color:navy;"></pre></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

 

  </span><span style="box-sizing:border-box;color:navy;"><div</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-messages</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"myForm.myName.$error"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">style</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">color</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">:</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">maroon</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    </span><span style="box-sizing:border-box;color:navy;"><div</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-message</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"required"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">You did not enter a field</span><span style="box-sizing:border-box;color:navy;"></div></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    </span><span style="box-sizing:border-box;color:navy;"><div</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-message</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"minlength"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">Your field is too short</span><span style="box-sizing:border-box;color:navy;"></div></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    </span><span style="box-sizing:border-box;color:navy;"><div</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-message</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"maxlength"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">Your field is too long</span><span style="box-sizing:border-box;color:navy;"></div></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"></div></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></span><span style="box-sizing:border-box;color:navy;"></form></span></code>

script.js

1

<code style="box-sizing: border-box; font-size: inherit; padding: 0px; color: inherit; background-color: transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;"><span style="box-sizing: border-box;">angular</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">module</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'ngMessagesExample'</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">[</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'ngMessages'</span><span style="box-sizing: border-box;">]);</span></code>

上一篇:ngMessages/directive/ngMessage下一篇:ngMock