...
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'];

<img ng-src="/UploadFiles/2021-04-02/{{mainImageUrl}}">

我们把大图片的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（最后一步啦！）做好了准备，我们会学习用一种更加优雅的方式来获取数据。
以上就是AngularJS 事件处理器的资料整理，后续继续补充，谢谢大家对本站的支持！