Disabling the Right Click in Angular UI

Disabling right click is very often required in applications. Let's see how to achieve this in Angular.

In Angular we can achieve this by creating the directive and applying that directive to the control level.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Disabling right click on Angulare UI </title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<script language="javascript">
var app = angular.module("sampleApp", []);
app.controller("AppCtrl", function ($scope) {
// console.log('called');
})
app.directive('preventRightClick', [
function () {
return {
restrict: 'A',
link: function ($scope, $ele) {
$ele.bind("contextmenu", function (e) {
e.preventDefault();
alert("Right click is disabled");
});
}
};
}
])
</script>
</head>
<body>
<div ng-app="sampleApp" ng-controller="AppCtrl " prevent-right-click style="height: 200px;
width: 400px; border: 5px solid gray">
<h4>
Disabling the right click on the Angular elements</h4>
<div>
<a href="#">Click Me </a>
<button prevent-right-click>
Right click me</button>
</div>
</body>
</html>