.stopPropagation() on link produced by Angular directive with transclusion

Question

I'm producing a directive that appends a link to a DIV by transclusion. Now I want to perform some functionality when the link is clicked and not go to the dummy href I have included (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) {
                // now we don't want the link to go to the href!
                scope.removeDiv = function(e){
                    e.stopPropagation();
                    console.log(elem); // but we do more things later....
                }
            }
        }
    })

When I click on the link we get an error as e is unknown and the href sends us to google. Even if I add return false; to the removeDiv method or change e for event we still get sent to the href location. Any ideas on how I make this work (a good explanation may be needed)

Answer 1

Use ng-click only instead of href, and then call $event.stopPropagation(); as mentioned here.