Javascript 如何在AngularJS中检测鼠标事件目标的模型

我在svg中绘制了几个元素（使用

ng开关

）并处理它们上的鼠标事件。控制器如下所示（有更多类型的元素和更多的鼠标事件需要处理）：

在鼠标事件处理程序中，我需要鼠标事件目标的模型。 我目前的解决方案是向每个svg元素添加

ng mousedown=“mousedown（element，$event）”

，这对于越来越多的元素类型来说是一个麻烦

    <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>

是否有方法仅向根svg元素添加

ng mousedown

，并从

$event

属性中检索单击元素的模型（

$event.target

或

$event.srcelem

提供了单击的svg元素，如何从中获取模型？）

完整示例：

---

是的，您可以使用

angular.element（…）.scope（）.p

如下所示：

标记：

<svg xmlns="http://www.w3.org/2000/svg" ng-mousedown="mousedown2($event)">

请参阅forked plunk:

因为

元素.scope（）

依赖于调试数据，所以它不是生产模式的解决方案。在更复杂的情况下，您必须编写一个设置“事件源”的指令，如果事件冒泡，则该指令可由父元素上的另一个指令处理（请参见下面的第二个示例）

在这种特殊情况下，如果将事件处理程序放在

ng repeat

元素上，则解决方案非常简单，如下所示：

角度模块（“应用程序”，[]） .控制器（“主控制器”，主控制器）； 函数MainController（）{ var vm=这个； vm.elements=[ {“类型”：“圆”，“x”：100，“y”：100}， {“类型”：“rect”，“x”：50，“y”：20}]； vm.mousedown=函数（元素$event）{ vm.msg=element.type； }; }

{{view.msg}

在

ng repeat

块内工作良好，但如果当前作用域没有

p

，则会失败。对于

ng repeat

之外或嵌套

ng repeat

内部的元素的任何建议，请使用范围中的相应属性。答案的本质不是

.p

，而是

angular.element（…）.scope（）

，它允许您访问元素的范围，并提供实际元素的

$event.target

。如何考虑范围是另一个问题。

<svg xmlns="http://www.w3.org/2000/svg" ng-mousedown="mousedown2($event)">

$scope.mousedown2 = function($event) {
    console.log(angular.element($event.target).scope().p);
});