文档章节

10-事件处理器

奋斗到天明
 奋斗到天明
发布于 2015/08/27 16:32
字数 735
阅读 48
收藏 0

在这一步,你将给手机详细页面增加一个手机图片交换器。

  • 手机详细视图显示一个当前手机大的图片和一系列小的缩略图,如果我们只要直接点击我们所需的缩略图来替换在的图片,那将十分有趣。让我们看看我们能用Angular怎么做。

工作空间重置介绍 重置你的工作区间到第十步

git checkout -f step-10

刷新你的浏览器,或者在线上检出这一步:第十步例子 大多数重要的修改列在下面,你可以在 GitHub上看到全部不同。

控制器

app/js/controllers.js:

...
var phonecatControllers = angular.module('phonecatControllers',[]);

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;
    }
  }]);

PhoneDetaialCtrl控制器中,我们创建了一个 mianImageUrl模型属性,设定他的默认值为第一个手机的图片URL. 我们也创建一个setImage事件处理函数,他将修改 mainImageUrl的值。

模板

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(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 去看测试结果 你也可以重构你其中了一个单元测试,因为mainImageUrl模型增加了一个属性到 PhoneDetaialCtrl控制器中。下面,我们创建一个函数 xyzPhoneData,为了让测试通过,他返回适当的带有images属性的json。 test/unit/controllersSpec.js:

...
  beforeEach(module('phonecatApp'));

...

 describe('PhoneDetailCtrl', function(){
    var scope, $httpBackend, ctrl,
        xyzPhoneData = function() {
          return {
            name: 'phone xyz',
            images: ['image/url1.png', 'image/url2.png']
          }
        };


    beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
      $httpBackend = _$httpBackend_;
      $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData());

      $routeParams.phoneId = 'xyz';
      scope = $rootScope.$new();
      ctrl = $controller('PhoneDetailCtrl', {$scope: scope});
    }));


    it('should fetch phone detail', function() {
      expect(scope.phone).toBeUndefined();
      $httpBackend.flush();

      expect(scope.phone).toEqual(xyzPhoneData());
    });
  });

你的单元测试现在会通过

实验

让我们给 PhoneDetaialCtrl增加一个新的控制器

$scope.hello = function(name) {
    alert('Hello ' + (name || 'world') + '!');
}

并增加

<button ng-click="hello('Elmo')">Hello</button>

phone-detail.html模板。

总结

在这是使用手机图片交换器,我们已经准备去 11步,学习更好的方法取数据。 原文地址: https://docs.angularjs.org/tutorial/step_10

© 著作权归作者所有

下一篇: 9-过滤器
奋斗到天明
粉丝 19
博文 112
码字总数 82707
作品 0
昌平
程序员
私信 提问
Dojo学习笔记(五):Dojo的事件机制

1、DOM事件 Dojo 的主要的DOM事件处理机制是dojo/on。Dojo为用户提供了统一的DOM事件机制,通过使用Dojo的dojo/on,用户可以避免各种DOM API的分歧,同时DOJO也预防了内存泄露问题。 页面on....

技术小胖子
2017/11/15
0
0
JavaScript异步编程笔记

异步事件的工作方式 事件!事件到底是怎么工作的?JavaScript出现了多久,对JavaScript异步事件模型就迷惘了多久。迷惘导致bug,bug导致加班,加班导致没时间撩妹子,这不是js攻城狮想要的生...

Hanson_dai
2018/10/19
0
0
JS冒泡特性浅析

JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素。 事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这...

菜到没谱
2013/01/03
471
4
Redis——事件

问题: Redis 是单线程的,怎么实现的多个客户端的连接访问? Redis服务器是一个事件驱动程序,服务器需要处理一下两类事件: * 文件事件(file event): Redis服务器通过套接字与客户端(或者其...

nao
2016/05/18
149
0
STM32F10xxx20xxx21xxxL1xxxx Cortex-M3程序设计手册 阅读笔记二(5):Cortex-M3处理器能量管理

Stm32和Cortex-M3处理器睡眠模式降低能量损耗: 睡眠模式停止处理器时钟,所有其它系统和外设时钟保持运行。 深度睡眠模式停止了大部分stm32系统和外设时钟。在产品级别,可能相应的为停止模...

qq_35014146
2018/03/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
3
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
3
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
4
0
Django的ChoiceField和MultipleChoiceField错误提示,选择一个有效的选项

在表单验证时提示错误:选择一个有效的选项 例如有这样一个表单: class ProductForm(Form): category = fields.MultipleChoiceField( widget=widgets.SelectMultiple(), ...

编程老陆
昨天
7
0
Vue核心概念及特性 (一)

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。 > 特点: 易用,灵活,高效,渐进式框架。 > 可以随意组合需要用到的模块 vue + components + vue-router + vuex + v...

前端优选
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部