事件处理(Event Handlers) ng-click操作
2014-05-15 22:16
337 查看
事件处理(Event Handlers) ng-click操作 step 10
本文主要通过介绍ng-click方法来对angularjs中的事件处理方法做个了解.1.切换目录
git checkout step-10 npm start
2.效果
点击右边的小图片,那么左边框中将显示大图片,示例如下:3.代码实现
查看step-9和step-10之间的代码差异:https://github.com/angular/angular-phonecat/compare/step-9...step-10
Controllers(控制器)
app/js/controllers.js:
'use strict'; /* Controllers */ var phonecatControllers = angular.module('phonecatControllers', []); phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) { $http.get('phones/phones.json').success(function(data) { $scope.phones = data; }); $scope.orderProp = 'age'; }]); phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http', function($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; } }]);
注:控制器这里定义了一个setImage方法,就是将mainImageUrl的值设置为当前imageUrl.
CSS(样式)
app/css/app.css
ul.phone-thumbs img:hover { cursor: pointer; }
改变鼠标移动上去的样式为指针形.
Template(模板)
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> ...
这里定义了一个ng-click方法,这里将当前的img作为参数传过去,然后,setImage方法将mainImageUrl的值替换为当前点击的图片,从而实现点击小图片,左边的图片被放大.
4.测试:
test/e2e/scenarios.js
... describe('Phone detail view', function() { ... it('should display the first phone image as the main phone image', function() { expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); }); it('should swap main image if a thumbnail image is clicked on', function() { element(by.css('.phone-thumbs li:nth-child(3) img')).click(); expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/); element(by.css('.phone-thumbs li:nth-child(1) img')).click(); expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); }); });
执行如下命令进行测试:
npm run protractor #测试结果如下: ------------------------------------ PID: 4250 (capability: chrome #1) ------------------------------------ Using ChromeDriver directly... ....... Finished in 9.867 seconds 7 tests, 11 assertions, 0 failures
5.实验:
在Controllers中的PhoneDetailCtrl加入:$scope.hello = function(name) { alert('Hello ' + (name || 'world') + '!'); }
同时在phone-detail.html中加入:
<h1>{{phone.name}}</h1> <button id="{{phone.name}}" ng-click="hello(phone.name)">Hello</button> <p>{{phone.description}}</p> ...
效果如下图所示:
这样就完成了一个ng-click的操作.
事件处理方法,除了ng-click还有其它如:
ngMousemove
ngMouseleave
ngMouseover
ngKeyup
ngSubmit
....
可以根据个人需要进行选择,和JS本身自带的方法差不多,这里只不过angularjs又多封装了一层.
相关文章推荐
- AngularJS学习--- 事件处理(Event Handlers) ng-click操作 step 10
- angular-ng-click用于操作事件的指令(传多个参数)
- Angular使用操作事件指令ng-click传多个参数示例
- Ext-实用工具 处理点击事件 Ext.util.ClickRepeater
- dataGridView1_CellContentDoubleClick事件处理
- js在firefox中没有现成的click事件,需要这么处理
- winform下怎么得到按钮的click事件的处理方法
- 转: (论坛答疑点滴)winform下怎么得到按钮的click事件的处理方法
- Linq To Sql模式中自动生成T-SQL增删改操作系列~PropertyChanged事件实现在子类中记录属性的变化,在基类中进行统一处理
- android手势操作滑动效果触摸屏事件处理
- jQuery操作输出重复问题(click 事件中嵌套)
- android listview综合使用示例_结合数据库操作和listitem单击长按等事件处理
- 图片上部分操作区域的确定和在区域上单击事件的处理.
- 我的java思想010:对于频繁变动的事件,在事件处理的代码中,代码不能过长,不能包含太多的操作
- 处理 ListView 中每一项的 MouseDoubleClick 事件
- Asp.net 更改Alert样式和后台注册Jquery的Ajax异步提交事件[包括处理前操作、处理后操作(注明:此方法只是作为参考,如有需要可自行修改)]
- 关于FLEX事件堆积 导致处理操作叠加 问题
- Gtk对于通常的gui程序,大家想做的事就是做一点事件处理(包括各种计算、文件操作等),然后在界面上显示出来
- android手势操作滑动效果触摸屏事件处理
- android手势操作滑动效果触摸屏事件处理