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之锁定表格栏位
Jun 29 Javascript
JS Array对象入门分析
Oct 30 Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 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
?繁体转换的class
2006/10/09 PHP
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Python探索之自定义实现线程池
2017/10/27 Python
python实现输入数字的连续加减方法
2018/06/22 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
python制作抽奖程序代码详解
2021/01/15 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
恒华伟业笔试面试题
2015/02/26 面试题
儿科护士实习自我鉴定
2013/10/17 职场文书
计算机专业优秀大学生自我总结
2014/01/21 职场文书
灰雀教学反思
2014/04/28 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
团结演讲稿范文
2014/05/23 职场文书
党员干部一句话承诺
2014/05/30 职场文书
2014年接待工作总结
2014/11/26 职场文书
python 实现的截屏工具
2021/05/08 Python
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
Python使用DFA算法过滤内容敏感词
2022/04/22 Python