如何在角度js中使用jquery accessible-mega-menu

Question

我在Angular中集成了Jquery Accessible mega菜单并创建了一个应用指令。但这部分起作用。当我选择父菜单项时，这将打开子菜单但我不能再次关闭它，除非标记下一项。但插件支持通过空格键打开和关闭。此外，菜单项单击不支持。

有什么不对吗？

角

angular
        .module('app.core')
        .directive('accessibleMegaMenu', [function () {
            return {
                restrict: "A",
                link: function (scope, element, attrs) {
                    element.accessibleMegaMenu(scope.$eval(attrs.accessibleMegaMenu));

                }
            }
        }]);

HTML

<div accessible-mega-menu="{
            uuidPrefix: 'accessible-megamenu',
            menuClass: 'nav-menu',
            topNavItemClass: 'nav-item',
            panelClass: 'sub-nav',
            panelGroupClass: 'sub-menu',
            hoverClass: 'hover',
            focusClass: 'focus',
            openClass: 'open'
        }">


        <ul class="page-sidebar-menu page-sidebar-menu-closed nav-menu">
                <!-- DOC: To remove the search box from the sidebar you just need to completely remove the below "sidebar-search-wrapper" LI element -->

                <li class="nav-item">
                    <a href="/" ui-sref="dashboard" ui-sref-active="active" id="dbdLnkHome" class="active" ng-click="vm.menuActive()">
                        <i class="icon-home"></i>
                        <span class="title">Dashboard</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="javascript:;" ui-sref="policysearch" ui-sref-active="active" id="dbdLnkPolicy" ng-click="vm.menuActive()">
                        <i class="icon-magnifier"></i>
                        <span class="title">Search</span>
                        <span class="arrow"></span>
                    </a>
                    <ul class="sub-menu"></ul>
                </li>
                <li class="nav-item" >
                    <a href="#/todo" ui-sref="tasksearch" ui-sref-active="active" id="dbdLnkTask" aria-expanded="false" aria-haspopup="true" aria-owns="sub-nav" aria-controls="sub-nav">
                        <i class="icon-check"></i>
                        <span class="title">Contact</span>
                    </a>
                    <ul class="sub-menu" aria-labelledby="dbdLnkTask" aria-expanded="false" aria-hidden="true" id="sub-nav">
                        <li ng-repeat="task in vm.availableTasks">
                            <a id="dbdLnkAvailable{{$index}}" href="javascript:;" ng-click="vm.handleTask(task)" ng-class="{'cn-active' : vm.activeMenuItem}">
                                <i ng-class="task.icon"></i> <span class="title">{{task.description}}</span>
                            </a>
                        </li>
                    </ul>
                </li>
    </ul>

</div>