One of my Angular controllers has the following line. The event handler works when the initial page loads, but it stops working when navigating to a different item with the same controller and template.
document.getElementById('item-details-view').addEventListener('touchstart', toggleshowoption, false);
UPDATE:
Attempting a directive solution:
app.directive('slideShowMenu', function () {
return {
link: function ($scope, $element, $attrs) {
var visible = false;
function toggleshowoption() {
if (!visible) {
$(".slideshow-controls").css({"visibility": "visible", "opacity": "1"});
visible = true;
}
else {
$(".slideshow-controls").css({"visibility": "hidden", "opacity": "0"});
visible = false;
}
}
$element.addEventListener('touchstart', toggleshowoption, false);
}
}
});
Encountering this error message:
undefined is not a function (evaluating '$element.addEventListener('touchstart', toggleshowoption, false)')