I have been trying to pass the ID of a SVG element generated by ng-repeat.
each one has a cx, cy, and an id:
$scope.circles = [
{cx:25, cy:40, id:1},
{cx:55, cy:40, id:2},
{cx:75, cy:40, id:3}];
These are interpolated in the HTML with this code:
<circle ng-repeat= "c in circles"
ng-attr-cx={{c.cx}}
ng-attr-cy={{c.cy}}
ng-attr-id={{c.id}}
r="6" stroke="black" stroke-width="3" fill="red"
ng-mouseover ="changeR(this)" />
There is a "base" SVG template in which these placed, and they appear in the appropriate locations.
When I examine the page elements, the ids are present. At the end of the SVG definition the ng-mouseover function should take the id, and allow for the modification of the circle... all of my attempts to pass the interpolated id attribute to the back end function seem to fail. I example I followed was here: fiddle, and it produced alerts in some permutations, but the id was either "undefined" or "[object Object]"...
My function in the back end is currently set up as
$scope.changeR= function (id){
alert(id);
var circleChange = document.getElementById(id);
circleChange.setAttribute("r", "20");
}
This produces an alert with "[object Object]", though I think I have stuck to the pattern in the fiddle, which works in the fiddle, bringing through the id as text in the alert window. When I pass the function the interpolated id numbers directly it works fine changing the radius like I wanted (I get the element by a hard coded ID and the radius changes on that one circle...)
How to I pass this ID to the back end so I can get the element and have it modify its own attributes effectively? If it is an issue of the page loading and somehow not registering the IDs in a timely way, why would the mouse-over event not be dealing with the fully loaded page?
