深入解析angular中事件处理机制中实现缩略图切换效果 step-12
一、首先看页面效果
在页面中我们点击右侧的小缩略图，左侧的图片能够做出动态的切换效果，那么这是怎么实现的恩？
二、实现思路：
1、导入angular-animate.js
2、在手机详细视图我们把大图片的ngSrc指令绑定到mainImageUrl属性上，同时我们注册一个ngClick处理器到缩略图上。当一个用户点击缩略图的任意一个时，这个处理器会使用setImage事件处理函数来把mainImageUrl属性设置成选定缩略图的URL。
三、实现过程分析：
1、
phone-list.html页面
当该页面加载的时候会调用Phone.query(); 然后$resource会去phones/phones.json文件。因为在 params:{phoneId:‘phones‘}中phoneId被赋值为phones。
如是说：service.js
<span style="font-size:18px;">'use strict';
/* Services */
var phonecatServices = angular.module('phonecatServices', ['ngResource']);
phonecatServices.factory('Phone', ['$resource',function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
});
}]);
</span>
简要说明如下：
模块名为：phonecatServices
服务名：Phone
定义的方法名为：query、发送的事get请求并传递一个参数，变量名为phoneId，返回的是一个数组。
2、接着我们看下phone-list.html
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail phone-listing">
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
在这里的每张显示的图片都加了一个url，并且每张图片上都带有phone.id 这个很重要，因为它携带的是json文件的文件名：比如说phones.json文件（也就是列表页面要加载的文件）
部分示例：
{
"age": 6,
"carrier": "Best Buy",
"id": "nexus-s",
"imageUrl": "img/phones/nexus-s.0.jpg",
"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet."
},
看到没？这里的phone.id就是指nexus-s（在下面可以据此找对应的文件）
当我们点击图片时首先执行的是：app.js
'use strict';
/* App Module */
var phonecatApp = angular.module('phonecatApp', [
'ngRoute', //添加依赖的资源，必须要有angular-route.js
'phonecatAnimations',
'phonecatControllers',
'phonecatFilters',
'phonecatServices'
]);
//定义路由规则
phonecatApp.config(['$routeProvider',function($routeProvider) {
$routeProvider.when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
在这里因为定义了路由规则，自然就到了详细列表页面。注意：这里定义的变量是phoneId ,也就是前一个也面携带过来的参数：phone.id 。到了这个页面就要收PhoneDetailContrl控制了。
接着再看页面phone-detail.html
<ul class="phone-thumbs">
<li ng-repeat="img in phone.images">
<img ng-src="{{img}}" ng-click="setImage(img)">
</li>
</ul>
小图是从这里遍历出来的，你可能好奇这个phone.images是从哪里冒出来的？别急。。。
我们看下控制器部分：
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone',
function($scope, $routeParams, Phone) {
$scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
$scope.mainImageUrl = phone.images[0];
});
$scope.setImage = function(imageUrl) {
$scope.mainImageUrl = imageUrl;
}
}]);
通过Phone这个服务发送的get请求根据页面传来的phoneId （也即是上面的nexus-s）能够获取到相对应的手机介绍信息，也即是一个手机对象。比如说：nexus-s.json文件
部分展示：
"id": "nexus-s",
"images": [
"img/phones/nexus-s.0.jpg",
"img/phones/nexus-s.1.jpg",
"img/phones/nexus-s.2.jpg",
"img/phones/nexus-s.3.jpg"
],
这个时候不就可以使用phone.images来遍历images 了吗啊？
当然今天 的重点是事件响应机制的分析，前面已经做足了铺垫，看上面的phone-detail.html中是不是有个ng-click指令？当我点击小图片的时候首先执行的事setImage函数将当前选中的imgeUrl赋值给主mainImageUrl ，这时候就实现了大图替换，大图中默认是显示json文件中配置的第一个图片。
分享是一种美德,学习进步离不开交流 O(∩_∩)O~