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 相关文章推荐
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 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
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
JavaScript delete 属性的使用
2009/10/08 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
简单实现python画圆功能
2018/01/25 Python
使用requests库制作Python爬虫
2018/03/25 Python
python3处理含有中文的url方法
2018/05/10 Python
python实现的发邮件功能示例
2019/09/11 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
python实现感知机模型的示例
2020/09/30 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
入党申请书自我鉴定
2013/10/12 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
民生工作实施方案
2014/05/31 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
Python入门之基础语法详解
2021/05/11 Python
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript