In my code, I have a function that takes a canvas element as a parameter:
function addMouseHandler(canvas) {
console.log(canvas); //logging the canvas element
canvas.addEventListener('mousemove', function (e) {
onMouseMove(e);
}, false);
canvas.addEventListener('mousedown', function (e) {
console.log('here'); //testing the event listener
onMouseDown(e);
}, false);
canvas.addEventListener('mouseup', function (e) {
onMouseUp(e);
}, false);
}
Everything works perfectly without AngularJS. However, once I add AngularJS to my code, the code no longer triggers any of the addEventListener() methods.
Although the first console.log() still displays the canvas element correctly:
<canvas width="945" height="550" id="mycanvas"></canvas>
The addEventListener() methods are never entered. I confirmed this by checking if 'here' was logged, but it never is.
Update: The issue started when I added ng-app="myApp" to the body element like this <body ng-app="myApp">. No other AngularJS code is present.