ANGULARJS Learning---event handling (handlers) Ng-click Action Step 10

This article mainly introduces the Ng-click method to make an understanding of the event processing method in Angularjs.

1. Switch directories

git checkout step-npm start

2. Effects

Click on the small picture on the right, then the large picture will appear in the left box, as shown below:

3. Code implementation

See the code differences between Step-9 and step-10: https://github.com/angular/angular-phonecat/compare/step-9...step-10

Controllers (Controller)

app/js/controllers.js:

' Use strict ';/*Controllers*/varPhonecatcontrollers = Angular.module (' phonecatcontrollers '), []);p Honecatcontrollers.controller (' Phonelistctrl ', [' $scope ', ' $http ',  function($scope, $http) {$http. Get (' Phones/phones.json '). Success (function(data) {$scope. Phones=data;    }); $scope. Orderprop= ' Age '; }]); Phonecatcontrollers.controller ( ' Phonedetailctrl ', [' $scope ', ' $routeParams ', ' $http ',  function($scope, $routeParams, $ HTTP) {$http. Get (' phones/' + $routeParams. Phoneid + '. JSON '). Success (function(data) {$scope. ph one = data; $scope. Mainimageurl = data.images[0]; }); $scope. setimage = function(IMAGEURL) {$scope. Mainimageurl = imageUrl; } }]);

Note: The controller defines a setimage method, which is to set the value of Mainimageurl to the current ImageUrl.

CSS (Style)

App/css/app.css

Ul.phone-thumbs img:hover {   cursor:pointer;}

Change the style of the mouse move to the pointer shape.

Template (Templates)

App/partials/phone-detail.html

<imgng-src= "{{Mainimageurl}}"class= "Phone">...<ulclass= "Phone-thumbs">  <Ling-repeat= "img in phone.images">    <imgng-src= "{{img}}" ng-click= "SetImage (img)">   </Li></ul>...

This defines a Ng-click method, where the current IMG is passed as a parameter , and the SetImage method replaces the value of the Mainimageurl with the currently clicked image, allowing for a small click of the image, and the image on the left is magnified.

4. Test:

test/e2e/scenarios.js

...  Describe (' Phone detail View ', function () {...    It (' should display the first phone image as the main phone image ', function () {      expect (element (By.css (' Img.phone ')). GE Tattribute (' src ')). Tomatch (/img\/phones\/nexus-s.0.jpg/);    });    It (' should swap main image if a thumbnail image is clicked on ', function () {      element (By.css ('. Phone-thumbs Li:nth-chil D (3) img '). click ();      Expect (Element (By.css (' Img.phone ')). getattribute (' src ')). Tomatch (/img\/phones\/nexus-s.2.jpg/);      Element (By.css ('. Phone-thumbs li:nth-child (1) img '). click ();      Expect (Element (By.css (' Img.phone ')). getattribute (' src ')). Tomatch (/img\/phones\/nexus-s.0.jpg/);    });  

Execute the following command to test:

The npm run protractor# test results are as follows:------------------------------------4250 (capability:chrome # 1 )------------------------------------in9.867  seconds7  One 0 Failures

5. Experiment:

In Controllers , Phonedetailctrl joins:

function (name) {        alert (' Hello ' + (name | | ' World ') + '! ' );    }

At the same time, add in phone-detail.html:

<button id= "{{phone.name}}" ng-click= "Hello (phone.name)" >Hello</button><p>{{ Phone.description}}</p>, .....

The effect is as follows:

This completes a ng-click operation.

Event handling methods, in addition to Ng-click and others such as:

Ngmousemove

Ngmouseleave

Ngmouseover

Ngkeyup

Ngsubmit

....

Can be based on individual needs to choose, and JS itself with the method of the same, here is just angularjs and more packaging a layer.