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});
            });
        });
    };
});

Ali Arshad · Accepted Answer · 2015-03-16 12:33:39Z

2

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>

answered Mar 16, 2015 at 12:33

Ali Arshad

4362 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dips Over a year ago

yes I wanted same thing to happen but i want the image that should be change on click is present inside ng-grid ,how can that be achieved.I am having a grid in which i am using cel template to show image in it but using this i could just bind single image that will be displayed in every row ,is there any other way using which i will be able to display multiple images on basis of some value,please help if u know.Thanks.

sylwester · Accepted Answer · 2015-03-16 12:33:37Z

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>

Collectives™ on Stack Overflow

How to implement right click with images using angular JS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related