Question

我在plunker中有一个我想要实现的示例。在右键单击中有10个更改，我想要一个图像，应该在右键单击时转换为另一个图像。请帮我解决这个问题。< / p>

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>

如何使用angular JS实现右键单击图像

2 个答案: