How to implement right click with images using angular JS

Question

I am having an example of what i want to achieve given below in plunker.As 10 changes on right click,i want an image there that should convert to some another image on right click.Please help me out with this.

http://jsfiddle.net/bcaudan/vTZZ5/

app.directive('ngRightClick', function($parse) {
    return function(scope, element, attrs) {
        var fn = $parse(attrs.ngRightClick);
        element.bind('contextmenu', function(event) {
            scope.$apply(function() {
                event.preventDefault();
                fn(scope, {$event:event});
            });
        });
    };
});

Answer 1

made this fiddle for you: JsFiddle Are you looking for something like this??

JS should be like this:

var app = angular.module('myApp', []);
function MyCtrl($scope) {
    $scope.img1 = "http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png";
    $scope.img2 = "http://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png";
    $scope.selected = $scope.img1;

    $scope.increment = function() {
      $scope.selected = $scope.img1;  
    };
    $scope.decrement = function() {
      $scope.selected = $scope.img2;
    };
};

app.directive('ngRightClick', function($parse) {
    return function(scope, element, attrs) {
    var fn = $parse(attrs.ngRightClick);
    element.bind('contextmenu', function(event) {
        scope.$apply(function() {
            event.preventDefault();
            fn(scope, {$event:event});
        });
    });
    };
});

and HTML should be:

<div ng-app="myApp" ng-controller="MyCtrl">
    <span class="action" 
      ng-click="increment()"
      ng-right-click="decrement()"><img ng-src="{{selected}}"></span>    
</div>      

Answer 2

Please see demo below

var app = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.images = [
    'http://upload.wikimedia.org/wikipedia/commons/a/a7/Tiffanie_at_cat_show.jpg',
    'http://www.thetimes.co.uk/tto/multimedia/archive/00342/114240651_cat_342943c.jpg'
  ];
  $scope.imageSrc = 1;
  $scope.toggleImage = function() {

    $scope.imageSrc == 1 ? $scope.imageSrc = 0 : $scope.imageSrc = 1;
  };

};

app.directive('ngRightClick', function($parse) {
  return function(scope, element, attrs) {
    var fn = $parse(attrs.ngRightClick);
    element.bind('contextmenu', function(event) {
      scope.$apply(function() {
        event.preventDefault();
        fn(scope, {
          $event: event
        });
      });
    });
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <image ng-src="{{images[imageSrc]}}" class="action" ng-right-click="toggleImage()" width="150px" />
</div>