AngularJS(3)PhoneCat Demo Advance

Go on with the PhoneCat demo?https://github.com/angular/angular-phonecat??

9. Custom Filter
…snip…

10. Event Handlers
Controller
Define a property in $scope to hold the image URL.
function($scope, $routeParams, $http) {
??? $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
????? $scope.phone = data;
????? $scope.mainImageUrl = data.images[0]; //set the page load default image first one
??? });

??? $scope.setImage = function(imageUrl) {
??????? $scope.mainImageUrl = imageUrl;
??? }

? }]);?

Provide a function in $scope to change the value of image URL.

Template
The most magic part is directly calling the $scope function in ng-click
<img ng-src="{{img}}" ng-click="setImage(img)">?

Test
element('.phone-thumbs li:nth-child(3) img').click();
? ? ? ? expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.2.jpg’);

Click on the sub element of li and verify the IMG src value.

11. REST and Custom Services
Template
Import the REST client?
? <script src="js/controllers.js"></script>
And put all my model codes in services.js