在 Angular 的自定义指令中监听鼠标事件

Listen to mouse events in a custom directive in Angular

我有一个名为 side-menu 的自定义指令，我可以在我的 index.html 中使用它，如下所示。 

<side-menu></side-menu>

在指令里面，有一个控制器。该控制器位于单独的文件中 (SidebarController.js)。以下是我的指令的模板文件：

<div class="sidebarContainer" ng-controller="SidebarController as sidebar">
...
</div>

这个控制器监听指令中的鼠标事件。例如，以下是来自控制器的一行：

angular.element('#sidebarContainer ul li').on('mouseleave', 'li.item > i', function ($event){...})

监听指令内列表项上的 mouseleave 事件。但是，我必须将这个控制器放在指令之外，因为它不会让我在指令上创建一个独立的范围。我将 index.html 的布局更改如下：

<div class="sidebarContainer">
    <side-menu></side-menu>
</div>

问题是，控制器不再监听指令中的任何内容。所有 DOM 元素仍位于相同位置。但是当我把它放在指令中时，控制器只听它们。我该如何解决这个问题？

  1. 首先AngularJs如果你在controller里面使用DOM操作会不开心。出于这个原因，我们使用 directives。所以我建议你在指令中使用所有 DOM 操作。

  2. 您也可以使用 angular 提供的事件处理程序（例如，在您的情况下为 ng-mouseleave），而不是 jquery 方式。

  3. 此外，独立作用域无法捕获父控制器中定义的方法和变量。为此，您可以使用 $parent 属性.

例如。 <li class="item" ng-mouseleave="$parent.mouseLeft('Item 1')"><i>Item 1</i></li>

您可以查看我为您创建的这个 plunker 代码。

https://plnkr.co/FWhus72HV7v7vTWfmBLQ