AngularJS 入门教程之事件处理器详解


Posted in Javascript onAugust 19, 2016

在这一步,你会在手机详细信息页面让手机图片可以点击。

请重置工作目录:

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(最后一步啦!)做好了准备,我们会学习用一种更加优雅的方式来获取数据。

以上就是AngularJS 事件处理器的资料整理,后续继续补充,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
HTML上传控件取消选择
Mar 06 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
js实现随机数小游戏
Jun 28 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
vue请求数据的三种方式
Mar 04 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 #Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 #Javascript
AngularJS入门教程之过滤器详解
Aug 19 #Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 #Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 #Javascript
js仿腾讯QQ的web登陆界面
Aug 19 #Javascript
基于WebUploader的文件上传js插件
Aug 19 #Javascript
You might like
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
jquery实现动态画圆
2014/12/04 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
高效使用Python字典的清单
2018/04/04 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
印度购物网站:TATA CLiQ
2017/11/23 全球购物
主持人演讲稿
2014/05/13 职场文书
师范生自荐信模板
2014/05/28 职场文书
高中同学会活动方案
2014/08/14 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
Java实现二分搜索树的示例代码
2022/03/17 Java/Android