如何使用角度JS实现图像的右键单击

Question

我在下面有一个关于我想要实现的目标的例子。由于右键单击时有 10 个变化，我想要一个应该在右键单击时转换为另一个图像的图像。请帮我解决这个问题。

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

为你

做了这个小提琴： JsFiddle你在寻找这样的东西吗？？

JS应该是这样的：

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

HTML 应该是：

<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

请看下面的演示

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>