纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页photoshop教程图片处理

事件处理器 AngularJS入门教程10

AngularJS   2021-07-05 我要评论

在这一步,你会在手机详细信息页面让手机图片可以点击。

请重置工作目录:

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(最后一步啦!)做好了准备,我们会学习用一种更加优雅的方式来获取数据。


相关文章

猜您喜欢

  • 给美女素材图片制作出油漆喷溅的效果 ps人像后期处理教程

    ps人像后期处理教程:给美女素材图片制作出油漆喷溅的效果,让美女照片变得更有艺术感,有一种油画般的效果,很漂亮,很美,很逼真,这种效果类似于手绘效果,然后在加上喷溅笔刷的装饰完成效果图,喜欢这种效果的童鞋们好好学习一下吧! 先看看效果图 1,导入..
  • 创意合成梦幻效果神的女儿形象 PS人像合成教程

    ps移花接木教程-人物合成技巧,PS人像合成教程:创意合成梦幻效果神的女儿形象,本教程效果图总体感觉气势非常磅礴,给人一种奇幻,开阔的感觉。作者在制作的时候肯定花了很多心思,组织了相当多的素材。不过教程的介绍不是很详细,大家可以根据效果图慢慢去..

网友评论

Copyright 2020 www.Liuxingsoft.com 【流星软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式