CODEWITHSUNDEEP
angularjs
Dips
Dips

Reputation: 13

How to implement right click with images using angular JS

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

Upvotes: 1

Views: 848

Answers (2)

Ali Arshad
Ali Arshad

Reputation: 436

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>

Upvotes: 2

sylwester
sylwester

Reputation: 16498

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>

Upvotes: 1

Related Questions