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

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

<side-menu></side-menu>

它侦听指令内列表项上的mouseleave事件。但是，我必须将这个控制器带到指令之外，因为它不允许我在指令上创建一个隔离的作用域。我更改了index.html的布局，如下所示：

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

问题是，控制器不再侦听指令中的任何内容。所有DOM元素仍然位于相同的位置。但控制器只在我将其放入指令中时才侦听它们。我怎样才能解决这个问题

首先，如果在控制器中使用DOM操作，AngularJs将不会高兴。正是出于这个原因，我们使用

指令

。所以我建议您在指令中使用所有DOM操作

此外，您还可以使用angular提供的事件处理程序（例如，在您的例子中是

ngmouseleave

），而不是jquery方式

此外，隔离作用域无法捕获父控制器内定义的方法和变量。为此，您可以使用

$parent

属性

例如。

项目1

你可以浏览我为你创建的plunker代码。
非常感谢您的回答。我会在短时间内尝试你的建议。
angular.element('#sidebarContainer ul li').on('mouseleave', 'li.item > i', function ($event){...})

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