I've been putting together a mock website to showcase my ideas, utilizing a blend of HTML5, Bootstrap, and AngularJS.
Everything was smooth sailing until I introduced some AngularJS code - suddenly, the right-click menu ceased to function in Chrome. (Oddly enough, it's working just fine in IE.) Other than that issue, the page is performing as expected.
Below, you'll find the HTML and the Angular-related JS snippets I've been working with. Despite my best efforts to search for a solution, all the results seem unrelated. Any assistance on this matter would be greatly appreciated.
<DOCTYPE html>
<head>
<meta charset="utf-8">
<title>
Hello World
</title>
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="public/css/bootstrap.min.css">
<script src="public/js/jquery.min.js"> </script> <script src="public/js/bootstrap.min.js"> </script> <script src="public/js/angular.min.js"> </script> <script src="public/js/dragdrop.js"> </script>
</head> <body data-ng-app="testapp" data-ng-controller="testappCtrl"> <div class="container-fluid">
<div class="col-md-2 ">
<img src="http://th07.deviantart.net/fs70/PRE/i/2014/004/5/3/battle_power_sword_by_ittoogami-d70wvph.jpg" class="img-responsive img-rounded" draggable="true" ondragstart="drag(event)" id="1">
</img>
</div>
<div class="col-md-2 ">
<div style="border: 5px solid" ondragover="allowDrop(event)" ondrop="drop(event)">
</div>
</div>
<div class="col-md-4 ">
<p>
Name:
<input type="text" class="form-control" data-ng-model="name">
</p>
<p>
{{name}}
</p>
</div>
</div>
<script src="public/js/testapp.js">
</script>
</body>
</html>
And here's the AngularJS segment:
var app = angular.module('testapp', []);
app.controller('testappCtrl', function($scope){
$scope.name = "";
});