[Angular Tutorial] 12 -Event Handlers
在这一步中,您将会在电话细节页面添加一个可点击的电话图片转换器。
·电话细节页面展示了当前电话的一张大图片和几张相对较小的略图。如果我们能仅仅通过点击略图就能把大图片换成略图就好了。让我们看看用Angular如何实现它。
最大的不同列举如下,您可以点击这里在GitHub上查看全部的不同。
组件控制器
app/phone-detail/phone-detail.component.js
:
...
controller: ['$http', '$routeParams',
function PhoneDetailController($http, $routeParams) {
var self = this; self.setImage = function setImage(imageUrl) {
self.mainImageUrl = imageUrl;
}; $http.get('phones/' + $routeParams.phoneId + '.json').then(function(response) {
self.phone = response.data;
self.setImage(self.phone.images[0]);
});
}
]
...
在phoneDetail组件控制器中,我们创建了mainImageUrl数据模型并且将其默认值设置为第一张图片URL。
我们也创建了setImage()方法(被当做事件处理器),那会改变mainImageUrl的值。
组件模板
app/phone-detail/phone-detail.template.html
:
<img ng-src="{{$ctrl.mainImageUrl}}" class="phone" />
...
<ul class="phone-thumbs">
<li ng-repeat="img in $ctrl.phone.images">
<img ng-src="{{img}}" ng-click="$ctrl.setImage(img)" />
</li>
</ul>
...
我们将大图片的ngSrc指令绑定为$ctrl.mainImageUrl属性。
我们同时也用略图注册了一个ngClick处理器。当用户点击略图中的一张时,处理器将会使用$ctrl.setImage()方法回调来将$ctrl.mainImageUrl属性的值改变为选中略图的URL。
实验
·和ngClick指令类似,该指令将Angular表达式绑定到click事件,还有很多为原生事件而内建得指令,比如dblclick
, focus
/blur,鼠标和键事件等等。
让我们在phoneDetail组件控制器中添加一个新的控制器方法。
self.onDblclick = function onDblclick(imageUrl) {
alert('You double-clicked image: ' + imageUrl);
};
并且在phone-detail.template.html中添加如下<img>元素:
<img ... ng-dblclick="$ctrl.onDblclick(img)" />
现在,无论何时您双击一个略图,都会弹出一个警告框,真恼人!
总结
完成了电话图片的正确交换,我们将在下一步中学习一种更好的获取数据的方法。
[Angular Tutorial] 12 -Event Handlers的更多相关文章
- 事件处理(Event Handlers) ng-click操作
事件处理(Event Handlers) ng-click操作 step 10 本文主要通过介绍ng-click方法来对angularjs中的事件处理方法做个了解. 1.切换目录 git checko ...
- [Angular Tutorial]PhoneCat Tutorial App
(注:曾经在<不敢止步>一书中看到学到一个观点,作者认为学习一门技术最好的方法就是翻译某部领域书籍.这里我决定做一次尝试,接下来花1个月左右时间,将Angular Tutorial Pho ...
- [AngularJS] Using the Angular scope $destroy event and method
With Angular scopes, you have access to a $destroy event that can be used to watch $scope events. Th ...
- [Angular Tutorial] 3-Components
在先前的步骤中,我们看到了一个控制器和一个模板如何一起工作来将一个静态的HTML文件转化为动态页面(view).一般说来,这在单页应用中一种非常常见的模式(在Angular应用中尤其是这样): ·客户 ...
- [Angular Tutorial] 7-XHRs & Dependency Injection
我们受够了在应用中用硬编码的方法嵌入三部电话!现在让我们用Angular内建的叫做$http的服务来从我们的服务器获取更大的数据集吧.我们将会使用Angular的依赖注入来为PhoneListCtrl ...
- [Angular Tutorial] 0-Bootstraping
在这一节的tutorial中,您将会逐渐熟悉AngularJS phonecat app的最重要的源代码文件.您也将学到如何将开发服务器与angular-seed绑定到一起,并且在浏览器中运行应用. ...
- Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)
Angular作为目前最为流行的前端框架,受到了前端开发者的普遍欢迎.不论是初学Angular的新手,还是有一定Angular开发经验的开发者,了解本文中的12个经典面试问题,都将会是一个深入了解和学 ...
- angular 中的$event 对象包含了浏览器原生的event对象
ou can pass the $event object as an argument when calling the function. The $event object contains t ...
- [译]The Python Tutorial#12. Virtual Environments and Packages
[译]The Python Tutorial#Virtual Environments and Packages 12.1 Introduction Python应用经常使用不属于标准库的包和模块.应 ...
随机推荐
- Win7下配置Django+Apache+mod_wsgi+Sqlite
搭建环境: win7 64位 Django 1.8.5 Apache2.4.17 mod_wsgi_ap24py27.so Python2.7.9 1 安装Apache 下载Apache Haus版, ...
- JavaScript(四)---- 函数
函数主要用来封装具体的功能代码. 函数是由这样的方式进行声明的:关键字 function.函数名.一组参数,以及置于括号中的待执行代码. 格式: function 函数名(形参列表){ ...
- 交换数组中两个元素的位置,元素包括key和value 一维数组
/*author: yangyu@sina.cndescription: 交换数组中两个元素的位置,元素包括key和value,具体用法见下面的例子*/$arr = array(11=>'a', ...
- 微信小程序Server端环境配置
主要内容:1. SSL免费证书申请步骤2. Nginx HTTPS 配置3. TLS 1.2 升级过程 微信小程序要求使用 https 发送请求,那么Web服务器就要配置成支持 https,需要先申请 ...
- c# 执行js的方法
http://www.cnblogs.com/wuhuacong/archive/2010/11/08/1871866.html 为了有效阻止恶意用户的攻击,一般登录都会采用验证码方式方式处理登录,类 ...
- ADB shell出现error:device offline提示
解决办法: 1.adb kill-server 2.adb start-server 3.adb remount执行这3个命令然后重新键入adb shell应该就可以了
- kill -QUIT <pid>
On Solaris and Linux a thread dump is also printed if the J2SE process receives a QUIT signal. So ki ...
- 转: OGG Checkpoint 详解
1. OGG Checkpoint 详解 定位中断的位置,下次启动从中断的位置开始恢复. 1.target 端配置: 2.一条记录对应一个replicat 一. Extract Checkpoints ...
- ural1542 Autocompletion
Autocompletion Time limit: 2.0 secondMemory limit: 64 MB The Japanese are infinitely in love with ma ...
- ZOJ 3702 Gibonacci number(数学推导)
公式推导题,G(0) = 1,G(1) = t,给出一个 i 和 G(i),要求求出G(j)的值: G(0) = 0*t + 1 G(1) = 1*t + 0; 观察t的系数和常数值可以知道二者都遵循 ...