本文主要通过介绍ng-click方法来对angularjs中的事件处理方法做个了解.

1.切换目录

git checkout step-
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: (capability: chrome #)
------------------------------------ Using ChromeDriver directly...
....... Finished in 9.867 seconds
tests, assertions, 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的更多相关文章

  1. 事件处理(Event Handlers) ng-click操作

    事件处理(Event Handlers) ng-click操作 step 10 本文主要通过介绍ng-click方法来对angularjs中的事件处理方法做个了解. 1.切换目录 git checko ...

  2. AngularJs学习——模拟用户登录的简单操作

    效果截图:

  3. angularjs学习总结 详细教程(转载)

    1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...

  4. [转载]angularjs学习总结 详细教程

    http://blog.csdn.net/yy374864125/article/details/41349417#t75 目录(?)[-] 前言 AngularJS概述 AngularJS是什么 A ...

  5. angularjs学习总结(~~很详细的教程)

    1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...

  6. 转: angularjs学习总结(~~很详细的教程)

    1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...

  7. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  8. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  9. zepto源码学习-04 event

    之前说完$(XXX),然后还有很多零零碎碎的东西需要去分析,结果一看代码,发现zepto的实现都相对简单,没有太多可分析的.直接略过了一些实现,直接研究Event模块,相比JQuery的事件系统,ze ...

随机推荐

  1. MySQL管理_数据库常用命令

    1.数据库赋权 进入mysql数据库: mysql> use mysql; 给root用户设置新密码: mysql> update user set password=password(& ...

  2. c#操作文件夹得读写权限

    对文件夹设置为Everyone的权限,首先需要先添加引用 using System.Security.AccessControl; 采用下面的方法对文件夹设置Everyone权限   /// < ...

  3. .NET微信通过授权获取用户的基本信息

    一.填写授权回调页面的域名 二.引导用户到指定的授权页面 例如:https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID& ...

  4. [JBoss] - 在Jboss 7.1 AS中打印hibernate的SQL方法

    因为JBoss使用的是log4j,JBoss的系统日志级别默认是INFO.而Hibernate或IBatis要打印SQL,级别为DEBUG,所以,程序设置了log4j级别为DEBUG会被JBoss系统 ...

  5. 泛型、Linq 查询使用

    查询类对象数组中符合条件的一个实例对象 泛型自带查询方法: EntityErpFldMx ms = aryFldMx.Where(i => i.Jhd == "4900120121&q ...

  6. Intellij Idea系列之导Jar包与编写单元测试(二)

     Intellij Idea系列之导Jar包与编写单元测试(二) 一.初衷 对于很多的初学者来说,Intellij如何导入jar包感到很迷惑,甚至在网上搜过相关文章之后还是云里雾里,本博客通过图文并茂 ...

  7. [jQuery]html(),text(),val()方法的区别

    1.HTML html():取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档 html(val):设置每一个匹配元素的html内容.这个函数不能用于XML文档.但 ...

  8. Eclipse启动Tomcat后无法访问项目

    Eclipse中的Tomcat可以正常启动,不过发布项目之后,无法访问,包括http://localhost:8080/的小猫页面也无法访问到,报404错误.这是因为Eclipse所指定的Server ...

  9. EntityFramework基础

    好久没有学习新东西了,最近研究了下EntityFramework,将基础代码贴出来, Entity Framework 利用了抽象化数据结构的方式,将每个数据库对象都转换成应用程序对象 (entity ...

  10. mongodb查询返回内嵌符合条件的文档

    db.T_Forum_Thread.find({ "ThreadReply.ReplyContent" : /范甘迪/ }, { "ThreadReply.$" ...