我有一个名为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元素仍位于相同的位置。但是，只有当我将其放入指令中时，控制器才会侦听它们。我怎么解决这个问题？
首先，AngularJs如果您在控制器内部使用DOM操作，那将不会很高兴。因此，我们使用directives。因此，我建议您在指令中使用所有DOM操作。
您也可以使用angular提供的事件处理程序（例如ng-mouseleave您的情况）而不是jquery方式。
同样，孤立的作用域无法捕获在父控制器中定义的方法和变量。为此，您可以使用$parent属性。
例如。 <li class="item" ng-mouseleave="$parent.mouseLeft('Item 1')"><i>Item 1</i></li>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句