文字
分享

AngularJS: API: ngMessages/directive/ngMessage


ngMessage

  1. - directive in module ngMessages

ngMessage is a directive with the purpose to show and hide a particular message. For ngMessage to operate, a parent ngMessages directive on a parent DOM element must be situated since it determines which messages are visible based on the state of the provided key/value map that ngMessages listens on.

指令信息

  • 这个指令会创建新的作用域(scope)。
  • 这个指令执行优先级为0.

用法

1

2

3

4

5

6

7

8

9

10

11

12

13

<code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, 'Courier New', 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>

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

参数

参数 类型 详述
ngMessage string

a string value corresponding to the message key.