Angular中的Jquery插件插入

Question

我想将响应式nav jquery插件插入到指令中。此插件提供键盘可访问的导航。我已经尝试了下面的jquery插件启动示例，但是提示像responseNav这样的错误不是函数。

有什么不对？

HTML

<div responsive-nav>
        <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"  ng-show="vm.inClientOrganization">
                <a href="javascript:;" ui-sref="policysearch" ui-sref-active="active" id="dbdLnkPolicy" ng-click="vm.menuActive()">
                    <i class="icon-magnifier"></i>
                    <span class="title">Policy Search</span>
                    <span class="arrow"></span>
                </a>
                <ul class="sub-menu"></ul>
            </li>
            <li class="nav-item" ng-show="vm.inClientOrganization">
                <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">Task Search</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>

Jquery的

 var navigation = responsiveNav(".nav-collapse", {
        customToggle: "#nav-toggle", // Selector: Specify the ID of a custom toggle
        enableFocus: true,
        enableDropdown: true,
        openDropdown: '<span class="screen-reader-text">Open sub menu</span>',
        closeDropdown: '<span class="screen-reader-text">Close sub menu</span>',
            open: function () {

            },
            close: function () {

            },
            resizeMobile: function () {

            },
            resizeDesktop: function () {

            },
        });

以角度创建指令。

角

angular
        .module('app.core')
        .directive('responsiveNav', ['$timeout', function ($timeout) {
            return {
                restrict: "A",
                link: function (scope, element, attrs) {
                    $timeout(function () {
                        element.responsiveNav({
                            enableFocus: true,
                            enableDropdown: true,
                            openDropdown: '<span class="screen-reader-text">Open sub menu</span>',
                            closeDropdown: '<span class="screen-reader-text">Close sub menu</span>',
                            open: function () { },
                            close: function () { },
                            resizeMobile: function () { },
                            resizeDesktop: function () { }
                        });
                    });
                }
            }
        }]);