I draw several elements in svg (using ng-switch) and handle mouse events on them. The controller looks like this (there are much more types of elements and more mouse events to handle):
app.controller('MainCtrl', function($scope) {
$scope.elements = [
{ "type": "circle", "x" : 100, "y" : 200 },
{ "type" : "rect", "x" : 50, "y" : 20 }
];
$scope.mousedown = function(element, $event) {
$scope.msg = element.type;
};
});
Inside the mouse event handler, I need the model of the target of the mouse event.
My current solution is to add ng-mousedown="mousedown(element, $event)" to each svg element, which is annoying for a growing number of element types.
<g ng-switch="p.type">
<g ng-switch-when="circle">
<circle ng-mousedown="mousedown(p, $event)"></circle>
</g>
<g ng-switch-when="rect">
<rect ng-mousedown="mousedown(p, $event)"></rect>
</g>
</g>
Is there a way to add ng-mousedown only to the root svg element and retrieve the model of the clicked element from the $event properties ($event.target or $event.srcElement gives me the clicked svg element, how to get the model from this?).
Complete example: http://plnkr.co/edit/nfgVSBBaeJ9EFKNjYEJn