I have created a custom directive in angular called 'teeth' that generates multiple canvas elements on my HTML page. Inside the 'teeth' directive, I am trying to use another custom directive named 'draw' to trigger an event when a canvas element is clicked. However, I am facing issues with the click event not working as expected. Can someone please provide guidance on how to resolve this issue?
(function () {
var controller = function ($scope) {
};
controller.$inject = ['$scope'];
var teeth = function () {
return {
restrict: 'E',
controller: controller,
link: function ($scope, element, attrs) {
function init(){
var count = 5;
var html = '<div class="row">'
for(var i=0; i<count;i++){
html += '<div class="test">'+
'<canvas id="'+i+'" width="58px" height="58px" draw></canvas>'+
'</div>';
}
html += '</div>';
element.html(html);
}
init();
}
}
};
angular.module('graphApp').directive('teeth', teeth);
}());
(function () {
var controller = function ($scope) {
};
controller.$inject = ['$scope'];
var draw = function () {
return {
restrict: 'A',
scope: {
id: '@id'
},
controller: controller,
link: function ($scope, element, attrs) {
element.on('click',function(event){
alert('element '+$scope.id+' clicked');
});
}
}
};
angular.module('graphApp').directive('draw', draw);
}());