I am currently developing a directive that adds a link to a DIV element through transclusion. However, I am facing an issue where I want to execute specific functionality when the link is clicked without being redirected to the dummy href (in this case google.com). For example...
.directive('deleteDiv', function () {
return {
restrict: 'A',
transclude: true,
template: '<a href="http://www.google.com" ng-click="removeDiv()">X</a> ',
link: function (scope, elem) {
// we need to prevent the link from redirecting
scope.removeDiv = function(e){
e.stopPropagation();
console.log(elem); // additional actions can be taken later on...
}
}
}
})
Upon clicking the link, an error occurs because e is undefined and the href attribute takes us to google. Even if I include return false; in the removeDiv method or change e to event, we are still directed to the href. Do you have any suggestions on how to resolve this issue? A detailed explanation may be necessary.