Page 368 - AngularJS权威教程

348 第 25 章 AngularJS 精华扩展

click。而ui-event模块就是一个简单的原生事件包装器，因此你可以使用它来响应任意元素上
由浏览器触发的事件。
例如，你想在用户双击另一个图像之后显示一个图像。只需设置ui-event指令为一个由事件
名称和该元素捕获到对应事件时要采取的行为组成的键值对即可。

比如，在HTML中，你可以在控制器中设置一个双击事件dbclick调用showImage()函数：
<imgsrc="/images/ui/ginger.png" ui-event="{dblclick:'showImage()'}" />
在控制器中，可以在作用域对象上像编写标准的方法一样编写对应的方法：

.controller('DemoController', function($scope) {
$scope.showImage = function() {
$scope.shouldShowImage = !$scope.shouldShowImage;
}
});
由于这个ui-event指令就是一个简单的原生浏览器事件包装器，因此你可以在任意元素上用
它来模拟任意浏览器事件。
例如，如果想捕获一个元素的blur或者focus事件，也可以使用ui-event指令。

比方说想针对表单输入提供一些有用的提示。你可以在focus事件和blur事件上设置相应的
行为来显示这些帮助提示。
例如，如果你有一个包含name和email输入字段的表单，可以给blur和focus事件附加一个
函数来在这些输入字段上显示帮助信息。

<formname="form">
<input type="text" name="name" placeholder="Your name"
ui-event="{focus: 'showNameHelp=true',
blur: 'showNameHelp=false'}" />
<input type="email" name="email" placeholder="Your email"
ui-event="{focus: 'showEmailHelp=true',
blur: 'showEmailHelp=false'}" />
</form>

在输入字段上设置这些事件时，还可以依据用户关注的字段来显示相应的帮助信息（使用
ng-show和ng-hide）。

25.4.4 ui-format

同样需要确保在HTML中引入format.js库：

<script type="text/javascript"
src="app/bower_components/angular-ui-utils/modules/format/format.js"></script>
然后设置ui.format为应用的依赖：

angular.module('myApp',['ui.format'])
format库是一个以不同方式处理字符串标记的包装器。它让你能够直接处理应用中被认为是
变量的标记。

我们可以使用这个格式化库中的标记替换功能，而不是数组或者键值对形式的JavaScript对