Page 367 - AngularJS权威教程

25.4 ui-utils 347

25.4.1 安装 19

$ bower install --save angular-ui-utils
20
我们需要确保在HTML模板中引入了这个库。 ui-utils库的每个组件都是作为独立模块构建
的，因此需要单独引入每个组件。
21
25.4.2 mask
22
当想要接受一个信用卡或者电话号码时（或者是其他任何特殊格式的信息），你可以提供一
个整洁的UI来告诉用户提供干净的信息。
23
你需要确保在HTML中引入mask.js库：

<script type="text/javascript"
src="app/bower_components/angular-ui-utils/modules/mask/mask.js"></script> 24

然后将ui-mask作为依赖设置给应用：
25
angular.module('myApp',['ui.mask'])

现在，可以使用ui-mask指令来指定输入遮罩了。ui-mask指令接受下列形式的格式字符串：
26
 A ——任意字母；
 9 ——任意数字； 27
 * ——任意字母数字字符。
例如，在一个input中格式化一个信用卡号码，ui-mask指令的设置看起来可能像这样：
28
<input name="ccnum" ui-mask="9999999999999999" ng-model="user.cc" placeholder="Credit card
number" />
29

除非所有验证都满足了，否则Angular视输入为无效，而ui-mask与此类似。
30
注意，上面这个input只支持输入遮罩匹配9999-9999-9999-9999的信用卡。稍微
做点工作就可以支持其他类型的卡了。
31
同样，你可以使用字符或者任意字母数字字符格式化一个输入字段。

32
25.4.3 ui-event

和其他模块一样，需要在HTML中引入event.js库： 33

<script type="text/javascript"
src="app/bower_components/angular-ui-utils/modules/event/event.js"></script>
34
然后还需要将ui.event作为应用的依赖引入：

angular.module('myApp',['ui.event']) 35
当想要处理AngularJS自身不支持的事件时，ui-event模块极其好用。例如，如果希望用户
双击某个元素或者处理一个blur事件，就必须编写一个包装函数来包装原生浏览器事件double 36