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 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
jquery中post方法用法实例
Oct 21 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
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权重计算方法代码分享
2014/01/09 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
Python类反射机制使用实例解析
2019/12/30 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
个人年终总结结尾
2015/03/06 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python
python 闭包函数详细介绍
2022/04/19 Python