1

我一直在尝试传递由 ng-repeat 生成的 SVG 元素的 ID。

每个都有一个 cx、cy 和一个 id：

$scope.circles = [
{cx:25, cy:40, id:1},
{cx:55, cy:40, id:2},
{cx:75, cy:40, id:3}];

这些是使用以下代码插入 HTML 中的：

<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)" />

有一个“基础”SVG 模板，它们放置在其中，并且它们出现在适当的位置。

当我检查页面元素时，ID 是存在的。在 SVG 定义的末尾，ng-mouseover 函数应该采用 id，并允许修改圆......我所有将内插 id 属性传递给后端函数的尝试似乎都失败了。我遵循的示例在这里：fiddle，它在某些排列中产生警报，但 id 是“未定义”或“[object Object]”......

我在后端的功能目前设置为

$scope.changeR= function (id){ 
  alert(id);
  var circleChange = document.getElementById(id);
  circleChange.setAttribute("r", "20");
}

这会产生一个带有“[object Object]”的警报，尽管我认为我已经坚持了小提琴中的模式，它在小提琴中工作，通过 id 作为警报窗口中的文本。当我直接通过函数插入的 id 数字时，它可以很好地改变我想要的半径（我通过硬编码的 ID 获取元素，并且半径在那个圆上发生变化......）

如何将此 ID 传递到后端，以便我可以获取元素并让它有效地修改自己的属性？如果这是页面加载的问题并且以某种方式没有及时注册 ID，为什么鼠标悬停事件不会处理完全加载的页面？

4

0 回答 0