Angularjs the event handler for the Getting Started tutorial _angularjs

In this step, you will be on the phone details page so that the phone picture can be clicked.

Please reset the working directory:

Git checkout-f step-10

The phone Details view shows a large picture of the current phone and a few smaller thumbnails. It would be better if the user clicked on the thumbnail to replace the big one. Now let's see how to implement it with ANGULARJS.

The most important differences between steps 9 and 10 are listed below. You can see the whole difference in the GitHub.

Controller

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

In the Phonedetailctrl controller, we created the Mainimageurl model property and set its default value to the URL of the first phone picture.

Template

App/partials/phone-detail.html

 ...

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

We bind the ngsrc instruction of the large picture to the Mainimageurl attribute.

At the same time we register a ngclick processor to the thumbnail. When a user clicks on any one of the thumbnails, the processor uses the SetImage event handler to set the Mainimageurl property to the URL of the selected thumbnail.

Test

To verify this new feature, we have added two end-to-end tests. A validation master picture is set to the first phone picture by default. The second test clicks on several thumbnails and verifies that the main picture changes as appropriate.

Test/e2e/scenarios.js

...
 Describe (' Phone detail View ', function () {

...

 ) It (' should display the ' the ' the ' the ' the ' the ' the ' the ' the ' the ' the main phone image ', function () {
  expect (' 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) IM G '). 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 ');});
 };

You can now refresh your browser and run the End-to-end test again, or you can run it on a ANGULARJS server.

Practice

Add a new controller method for Phonedetailctrl:

 $scope. Hello = function (name) {
  alert (' Hello ' +) (name | | ' World ') + '! ');
 

and add:

<button ng-click= "Hello (' Elmo ')" >Hello</button>

To the phone-details.html template.

Summarize

Now that the picture browser is ready, we are already in step 11 (the last step!). Ready, we'll learn to get the data in a more elegant way.

The above is the Angularjs event processor data collation, follow-up continue to add, thank you for your support of this site!