diff --git a/docs/content/tutorial/step_10.ngdoc b/docs/content/tutorial/step_10.ngdoc index fd073a5c9d41..a3a8ea060661 100644 --- a/docs/content/tutorial/step_10.ngdoc +++ b/docs/content/tutorial/step_10.ngdoc @@ -32,13 +32,22 @@ phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$h $scope.setImage = function(imageUrl) { $scope.mainImageUrl = imageUrl; }; + + $scope.setImagesKeyed=function(e, imageUrl){ + if ((e.which==13) || (e.which==31)){ + $scope.mainImageUrl = imageUrl; + e.preventDefault(); + } + }; + }]); ``` In the `PhoneDetailCtrl` controller, we created the `mainImageUrl` model property and set its default value to the first phone image URL. -We also created a `setImage` event handler function that will change the value of `mainImageUrl`. +We also created a `setImage` and 'setImagesKeyed' event handler functions that will change the value of `mainImageUrl`. Since this image does not normally support keyboard navigation, we have +also added an ngKepress handler and tabindex to ensure keyboard only users are able to interact with the image. ## Template @@ -52,7 +61,7 @@ __`app/partials/phone-detail.html`:__