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 相关文章推荐
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 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实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
JavaScript中的集合及效率
2010/01/08 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
python 换位密码算法的实例详解
2017/07/19 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
python实现网站微信登录的示例代码
2019/09/18 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
招商业务员岗位职责
2013/12/16 职场文书
自我鉴定注意事项
2014/01/19 职场文书
产品包装策划方案
2014/05/18 职场文书
小学德育工作总结2015
2015/05/12 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
Linux中各个目录的作用与内容
2022/06/28 Servers