这个原文为：Event Handlers。
具体什么意思，我们不管了。看看想达到的效果吧。
http://guide.mengyunzhi.com/angular-phonecat/app/#!/phones/motorola-atrix-4g
点击右侧的图片，左侧显示图片的大图。示例中的动画效果，我们将放在第十四章实现，本节仅实现点击后，显示相应的大图。
## 重构页面
使用bootstrap的栅格系统，我们首先对页面进行重构，让它看起来更接近我们的示例站点。
`yun-zhi/phone-detail.template.html`
~~~
<div class="container-fluid">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
</div>
~~~
重新整理元素
~~~
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img ng-src="{{$ctrl.phone.images[0]}}" class="phone img-responsive img-rounded" />
</div>
<div class="col-md-8">
<h1>{{$ctrl.phone.name}}</h1>
<p>{{$ctrl.phone.description}}</p>
<div class="row">
<div class="col-md-2" ng-repeat="img in $ctrl.phone.images">
<img ng-src="{{img}}" class="img-thumbnail" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<h4>Availability and Networks</h4>
<dl>
<dt>Availability</dt>
<dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Availability and Networks</h4>
<dl>
<dt>Availability</dt>
<dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Battery</h4>
<dl>
<dt>Type</dt>
<dd>{{$ctrl.phone.battery.type}}</dd>
<dt>Talk Time</dt>
<dd>{{$ctrl.phone.battery.talkTime}}</dd>
<dt>Standby time (max)</dt>
<dd>{{$ctrl.phone.battery.standbyTime}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Storage and Memory</h4>
<dl>
<dt>RAM</dt>
<dd>{{$ctrl.phone.storage.ram}}</dd>
<dt>Internal Storage</dt>
<dd>{{$ctrl.phone.storage.flash}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Connectivity</h4>
<dl>
<dt>Network Support</dt>
<dd>{{$ctrl.phone.connectivity.cell}}</dd>
<dt>WiFi</dt>
<dd>{{$ctrl.phone.connectivity.wifi}}</dd>
<dt>Bluetooth</dt>
<dd>{{$ctrl.phone.connectivity.bluetooth}}</dd>
<dt>Infrared</dt>
<dd ng-bind-html="$ctrl.phone.connectivity.infrared | checkmark"></dd>
<dt>GPS</dt>
<dd ng-bind-html="$ctrl.phone.connectivity.gps | checkmark"></dd>
</dl>
</div>
<div class="col-md-2">
<h4>Android</h4>
<dl>
<dt>OS Version</dt>
<dd>{{$ctrl.phone.android.os}}</dd>
<dt>UI</dt>
<dd>{{$ctrl.phone.android.ui}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Size and Weight</h4>
<dl>
<dt>Dimensions</dt>
<dd ng-repeat="dim in $ctrl.phone.sizeAndWeight.dimensions">{{dim}}</dd>
<dt>Weight</dt>
<dd>{{$ctrl.phone.sizeAndWeight.weight}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Display</h4>
<dl>
<dt>Screen size</dt>
<dd>{{$ctrl.phone.display.screenSize}}</dd>
<dt>Screen resolution</dt>
<dd>{{$ctrl.phone.display.screenResolution}}</dd>
<dt>Touch screen</dt>
<dd ng-bind-html="$ctrl.phone.display.touchScreen | checkmark"></dd>
</dl>
</div>
<div class="col-md-2">
<h4>Hardware</h4>
<dl>
<dt>CPU</dt>
<dd>{{$ctrl.phone.hardware.cpu}}</dd>
<dt>USB</dt>
<dd>{{$ctrl.phone.hardware.usb}}</dd>
<dt>Audio / headphone jack</dt>
<dd>{{$ctrl.phone.hardware.audioJack}}</dd>
<dt>FM Radio</dt>
<dd ng-bind-html="$ctrl.phone.hardware.fmRadio | checkmark"></dd>
<dt>Accelerometer</dt>
<dd ng-bind-html="$ctrl.phone.hardware.accelerometer | checkmark"></dd>
</dl>
</div>
<div class="col-md-2">
<h4>Camera</h4>
<dl>
<dt>Primary</dt>
<dd>{{$ctrl.phone.camera.primary}}</dd>
<dt>Features</dt>
<dd>{{$ctrl.phone.camera.features.join(', ')}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Additional Features</h4>
<dd>{{$ctrl.phone.additionalFeatures}}</dd>
</div>
</div>
</div>
~~~
最终效果:
## 添加点击事件
如果以前我们接触过JS，相信对on-click肯定不陌生。在angularjs中，我们使用ng-click来绑定点击事件。
`yun-zhi/phone-detail.component.js`
~~~
+ // 设置大图
+ self.setImage = function setImage(imgUrl){
+ console.log(imgUrl);
+ };
~~~
`yun-zhi/phone-detail.template.html`
~~~
<div class="col-md-2" ng-repeat="img in $ctrl.phone.images">
- <img ng-src="{{img}}" class="img-thumbnail" />
+ <img ng-click="$ctrl.setImage(img)" ng-src="{{img}}" class="img-thumbnail" />
</div>
~~~
测试：
点击图片后，已经将图片的地址传入C层。
## 绑定数据
下面，我们将传入值绑定到左侧的大图上。
`yun-zhi/phone-detail.component.js`
~~~
// 设置大图
self.setImage = function setImage(imgUrl){
- console.log(imgUrl);
+ self.mainImageUrl = imgUrl;
};
...
self.phone = response.data;
+
+ // 将大图设置为第一张图片
+ self.setImage(self.phone.images[0]);
});
~~~
`yun-zhi/phone-detail.template.html`
~~~
<div class="col-md-4">
- <img ng-src="{{$ctrl.phone.images[0]}}" class="phone img-responsive img-rounded" />
+ <img ng-src="{{$ctrl.mainImageUrl}}" class="phone img-responsive img-rounded" />
</div>
~~~
总结：
点用户点击图片时，能过setImage()将图片的地址传给C层，C层再通过数据双向绑定对左侧大图的URL地址进行了替换。从而达到了点击右侧缩略图显示左侧大图的目的。
* * * * *
`yun-zhi/phone-detail.template.html`
~~~
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img ng-src="{{$ctrl.mainImageUrl}}" class="phone img-responsive img-rounded" />
</div>
<div class="col-md-8">
<h1>{{$ctrl.phone.name}}</h1>
<p>{{$ctrl.phone.description}}</p>
<div class="row">
<div class="col-md-2" ng-repeat="img in $ctrl.phone.images">
<img ng-click="$ctrl.setImage(img)" ng-src="{{img}}" class="img-thumbnail" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<h4>Availability and Networks</h4>
<dl>
<dt>Availability</dt>
<dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Availability and Networks</h4>
<dl>
<dt>Availability</dt>
<dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Battery</h4>
<dl>
<dt>Type</dt>
<dd>{{$ctrl.phone.battery.type}}</dd>
<dt>Talk Time</dt>
<dd>{{$ctrl.phone.battery.talkTime}}</dd>
<dt>Standby time (max)</dt>
<dd>{{$ctrl.phone.battery.standbyTime}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Storage and Memory</h4>
<dl>
<dt>RAM</dt>
<dd>{{$ctrl.phone.storage.ram}}</dd>
<dt>Internal Storage</dt>
<dd>{{$ctrl.phone.storage.flash}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Connectivity</h4>
<dl>
<dt>Network Support</dt>
<dd>{{$ctrl.phone.connectivity.cell}}</dd>
<dt>WiFi</dt>
<dd>{{$ctrl.phone.connectivity.wifi}}</dd>
<dt>Bluetooth</dt>
<dd>{{$ctrl.phone.connectivity.bluetooth}}</dd>
<dt>Infrared</dt>
<dd ng-bind-html="$ctrl.phone.connectivity.infrared | checkmark"></dd>
<dt>GPS</dt>
<dd ng-bind-html="$ctrl.phone.connectivity.gps | checkmark"></dd>
</dl>
</div>
<div class="col-md-2">
<h4>Android</h4>
<dl>
<dt>OS Version</dt>
<dd>{{$ctrl.phone.android.os}}</dd>
<dt>UI</dt>
<dd>{{$ctrl.phone.android.ui}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Size and Weight</h4>
<dl>
<dt>Dimensions</dt>
<dd ng-repeat="dim in $ctrl.phone.sizeAndWeight.dimensions">{{dim}}</dd>
<dt>Weight</dt>
<dd>{{$ctrl.phone.sizeAndWeight.weight}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Display</h4>
<dl>
<dt>Screen size</dt>
<dd>{{$ctrl.phone.display.screenSize}}</dd>
<dt>Screen resolution</dt>
<dd>{{$ctrl.phone.display.screenResolution}}</dd>
<dt>Touch screen</dt>
<dd ng-bind-html="$ctrl.phone.display.touchScreen | checkmark"></dd>
</dl>
</div>
<div class="col-md-2">
<h4>Hardware</h4>
<dl>
<dt>CPU</dt>
<dd>{{$ctrl.phone.hardware.cpu}}</dd>
<dt>USB</dt>
<dd>{{$ctrl.phone.hardware.usb}}</dd>
<dt>Audio / headphone jack</dt>
<dd>{{$ctrl.phone.hardware.audioJack}}</dd>
<dt>FM Radio</dt>
<dd ng-bind-html="$ctrl.phone.hardware.fmRadio | checkmark"></dd>
<dt>Accelerometer</dt>
<dd ng-bind-html="$ctrl.phone.hardware.accelerometer | checkmark"></dd>
</dl>
</div>
<div class="col-md-2">
<h4>Camera</h4>
<dl>
<dt>Primary</dt>
<dd>{{$ctrl.phone.camera.primary}}</dd>
<dt>Features</dt>
<dd>{{$ctrl.phone.camera.features.join(', ')}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Additional Features</h4>
<dd>{{$ctrl.phone.additionalFeatures}}</dd>
</div>
</div>
</div>
~~~
`yun-zhi/phone-detail.component.js`
~~~
angular.
module('yunZhi').
component('phoneDetail', {
templateUrl: 'yun-zhi/phone-detail.template.html',
controller: ['$http', '$routeParams',
function PhoneListController($http, $routeParams) {
var self = this;
// 设置大图
self.setImage = function setImage(imgUrl){
self.mainImageUrl = imgUrl;
};
// 使用$routeParam获取phoneId
// $routeParam存在于angular-route模块中
var phoneId = $routeParams.phoneId;
// 拼接存放手机数据的文件地址
var url = 'phones/' + phoneId + '.json';
// 发起请求
$http.get(
url
).
then(function(response){
console.log(response);
self.phone = response.data;
// 将大图设置为第一张图片
self.setImage(self.phone.images[0]);
});
}
]
});
~~~
- 前言
- 第一章：准备知识
- 第一节：GIT
- 第二节：Node.js
- 第三节：http-server
- 第四节：bower
- 第五节：firefox+chrome
- 第二章：官方示例教程
- 第零节：Hello Yunzhier
- 第一节：静态模板
- 第二节：MVC
- 回调函数
- 第三节：组件
- 第四节：重构组件
- 2.4.1 调用组件
- 2.4.2 规划目录结构
- 2.4.3 剥离V层
- 2.4.4 大话测试
- 第五节：循环过滤器
- 第六节：双向数据绑定
- 第七节：XHR与依赖注入
- 第八节：添加缩略图
- 第九节：模拟页面跳转
- 2.9.1 使用bower
- 2.9.2 使用grunt
- 第十节：完善手机详情页
- 第十一节：自定义过滤器
- 第十二节：行为处理
- 第十三节：封装请求
- 第十四节：应用动画
- 第十五节：总结
- 第三章：菜谱管理示例
- 第四章：总结