AngularJS入门教程10:事件处理器
在这一步,你会在手机详细信息页面让手机图片可以点击。
请重置工作目录:
git checkout -f step-10
手机详细信息视图展示了一幅当前手机的大号图片,以及几个小一点的缩略图。如果用户点击缩略图就能把那张大的替换成自己那就更好了。现在我们来看看如何用AngularJS来实现它。
步骤9和步骤10之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。
控制器
app/js/controllers.js
...
function PhoneDetailCtrl($scope, $routeParams, $http) {
$http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
$scope.phone = data;
$scope.mainImageUrl = data.images[0];
});
$scope.setImage = function(imageUrl) {
$scope.mainImageUrl = imageUrl;
}
}
//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http'];
在PhoneDetailCtrl控制器中,我们创建了mainImageUrl模型属性,并且把它的默认值设为第一个手机图片的URL。
模板
app/partials/phone-detail.html
<img ng-src="{{mainImageUrl}}" class="phone">
...
<ul class="phone-thumbs">
<li ng-repeat="img in phone.images">
<img ng-src="{{img}}" ng-click="setImage(img)">
</li>
</ul>
...
我们把大图片的ngSrc指令绑定到mainImageUrl属性上。
同时我们注册一个ngClick处理器到缩略图上。当一个用户点击缩略图的任意一个时,这个处理器会使用setImage事件处理函数来把mainImageUrl属性设置成选定缩略图的URL。
测试
为了验证这个新特性,我们添加了两个端到端测试。一个验证主图片被默认设置成第一个手机图片。第二个测试点击几个缩略图并且验证主图片随之合理的变化。
test/e2e/scenarios.js
...
describe('Phone detail view', function() {
...
it('should display the first phone image as the main phone image', function() {
expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.0.jpg');
});
it('should swap main image if a thumbnail image is clicked on', function() {
element('.phone-thumbs li:nth-child(3) img').click();
expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.2.jpg');
element('.phone-thumbs li:nth-child(1) img').click();
expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.0.jpg');
});
});
});
你现在可以刷新你的浏览器,然后重新跑一遍端到端测试,或者你可以在AngularJS的服务器上运行一下。
练习
为PhoneDetailCtrl添加一个新的控制器方法:
$scope.hello = function(name) {
alert('Hello ' + (name || 'world') + '!');
}
并且添加:
<button ng-click="hello('Elmo')">Hello</button>
到phone-details.html模板。
总结
现在图片浏览器已经做好了,我们已经为步骤11(最后一步啦!)做好了准备,我们会学习用一种更加优雅的方式来获取数据。
- ·Linux procinfo命令使用教程,学习procinfo命令的用法
- ·Linux spell命令使用教程,学习spell命令的用法及spel
- ·Linux df命令使用教程,学习df命令的用法及df命令语法
- ·Linux id命令使用教程,学习id命令的用法及id命令语法
- ·Linux dip命令使用教程学习,dip命令的用法与实例讲解
- ·Linux zipinfo命令使用教程学习,info命令语法动手详
- ·Linux sort命令使用教程学习惯,sort命令语法详细讲解
- ·Linux ar命令的用法及实例学习-ar命令语法的运用技巧
- ·Linux login命令的用法及实例讲解
- ·linux find命令使用教程及find命令的用法与实例讲解
- ·linux dump命令用法详解。dump命令学习心得。dump命令
- ·linux kill命令使用教程,kill函数命令学习心得。
- ·linux awk数组学习心得及awk数组操作详细介绍 用awk进
- ·Linux Unzip命令使用教程,Linux zip命令使用教程
- ·linux中echo命令详解学习,echo命令的使用方法。
- ·uniq命令详解-linux uniq语法使用教程学习-uniq的用法
- ·AngularJS入门教程-AngularJS教程-从零开始学习Angula
- ·AngularJS入门教程快速开始,从零开始学习AngularJS的
- ·AngularJS入门教程:导言和准备
- ·AngularJS入门教程00:引导程序
- ·AngularJS入门教程01:静态模板
- ·AngularJS入门教程02:AngularJS 模板
- ·AngularJS入门教程03:迭代器过滤
- ·AngularJS入门教程04:双向绑定