5 Jun 2014

How to handle right click in AngularJS

AngularJS中处理鼠标右键点击事件可以通过contextmenu实现,废话不多说,直接上代码:

1.HTML

<style type="text/css">
.action {
    cursor: pointer;
    border: 1px solid black;
    padding: 5px;
}
</style>
<div ng-app="myApp" ng-controller="MyCtrl">
    Right click me:
    <span class="action"
          ng-click="increment()"
          ng-right-click="decrement()"></span>
</div>

2.JavaScript：

var app = angular.module('myApp', []);
function MyCtrl($scope) {
    $scope.value = 50;
    $scope.increment = function() {
      $scope.value = $scope.value + 1;
    };
    $scope.decrement = function() {
      $scope.value = $scope.value - 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});
            });
        });
    };
});

样例代码通过左右键点击数字,对count进行加减操作.

Tags:

0 comments