[Angular Tutorial] 12-event handlers

In this step, you will add a clickable phone picture converter to the phone details page.

• The phone Details page shows a large picture of the current phone and several relatively small sketches. It would be nice if we could just click on the thumbnail to change the big picture to a sketch. Let's see how to implement it with angular.

The biggest differences are listed below, you can click here to view all the differences on GitHub.

Component Controller

app/phone-detail/phone-detail.component.js:

Controller: [' $http ', ' $routeParams ',  function Phonedetailcontroller ($http, $routeParams) {    var = this ;    Self.setimage = function SetImage (imageUrl) {      self.mainimageurl = imageUrl;    };    $http. Get (' phones/' + $routeParams. Phoneid + '. JSON '). Then (function (response) {      self.phone = response.data;      Self.setimage (Self.phone.images[0]);}  ] ...

In the Phonedetail component Controller, we created the mainimageurl data model and set its default value to the first picture URL.

We also created the setimage () method (which is treated as the event handler), which alters the value of the mainimageurl .

Component templates

app/phone-detail/phone-detail.template.html:

...<ul class= "Phone-thumbs" >  <li ng-repeat= "img in $ctrl. phone.images" >      </li> </ul>, .....

We will ngsrc directive is bound to $ctrl . mainimageurl property.

We also used a sketch to register a Ngclick processor. 。 When the user clicks on one of the sketches, the processor will use $ctrl < Span style= "Background-color: #c0c0c0;" >. setimage () method callback to $ctrl . mainimageurl property is changed to the URL of the selected sketch.

Experiment

• Similar to the ngclick directive, this directive binds the angular expression to the click Event, and there are many instructions built into the native event, such as dblclick focus /blur，鼠标和键事件等等。

Let's add a new controller method to the Phonedetail component Controller.

Self.ondblclick = function OnDblclick (IMAGEURL) {  alert (' You double-clicked Image: ' + imageUrl);};

And inphone-detail.template.html中添加如下元素：


Now, whenever you double-click a sketch, a warning box pops up, and it's annoying!

Summarize

Complete the correct exchange of phone pictures, we will learn a better way to get the data in the next step.

[Angular Tutorial] 12-event handlers