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 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 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
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
axios基本入门用法教程
2017/03/25 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
构建Python包的五个简单准则简介
2015/06/15 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
历史学专业毕业生求职信
2013/09/27 职场文书
学生学习总结的自我评价
2013/10/22 职场文书
高中生学习的自我评价
2013/12/14 职场文书
数学国培研修感言
2014/02/13 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
整改报告怎么写
2014/11/06 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS