我有一个混合 Angular 应用程序,但我的下拉菜单不起作用

斯达多

我正在构建一个混合角度应用程序,但我的下拉菜单有问题。它没有打开,而是重定向我。我认为依赖项以正确的顺序加载。我正在使用引导程序 3.1.1 和 jquery 2.1.3。这是我参考的html代码:

<li class="dropdown">
                    <a data-toggle="dropdown" href="#" style="padding-right: 7px;padding-left: 7px;" class="dropdown-toggle" ng-click="$event.stopPropagation(); opzioniIndexIsOpen = !opzioniIndexIsOpen" title="Apri">
                        <span class="sr-only">Opzioni</span>
                        <span class="nav-label-container hidden-sm hidden-md">
                            <span class="nav-label"><i ng-class="opzioniIndexIsOpen ? 'caret fa fa-chevron-down' : 'caret fa fa-chevron-up'"></i></span>
                            <span class="nav-sublabel" style="opacity: 0.0; margin-top: 20px; ">{{debugInfo}}</span>
                        </span>
                        <span class="visible-md visible-sm">
                            <i class="opzioniIndexIsOpen ? 'caret fa fa-chevron-down' : 'caret fa fa-chevron-up'"></i>
                        </span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header" style="border-bottom:1px solid">Versione</li>
                        <li><a tabindex="" title="" href="javascript:void(0);" style="cursor:default">{{currentVersion+'DB'+currentVersionDb+'FL'+currentVersionFlussi+'_'+currentVersionBackend}}</a></li>
                        <li ng-hide="links.length === 0" class="dropdown-header" style="border-bottom:1px solid">Link Utili</li>
                        <li ng-repeat="collegamento in links track by collegamento.id">
                            <a tabindex="" target="_blank" title="Apri Collegamento" ng-href="{{collegamento.link}}" style="cursor:default"><i class="fa fa-external-link "></i>&nbsp;{{collegamento.descrizione}}</a>
                        </li>
                        <li class="dropdown-header" style="border-bottom:1px solid">Operazioni</li>
                        <li><a tabindex="" title="" href="#/gestioneOffline"><i class="fa fa-signal"></i>&nbsp;Gestione Offline</a></li>
                        <li ng-if="!mostraOff"><a tabindex="" title="" href="#/cfg/homeConfig" ng-if="abilitazioni.CONFIGURAZIONE_IMPOSTAZIONI"><i class="fa fa-cogs"></i>&nbsp;Configurazioni</a></li>
 Apri un 买一张高清鞋底 -->
                        <li><a tabindex="" title="" href="#" ng-click="apriPopupSegnalazione()"><i class="fa fa-headphones"></i>&nbsp;Apri un ticket a HD Sole</a></li>
                        <li><a tabindex="" title="" href="#" ng-click="toContesto()"><i class="fa fa-user"></i>&nbsp;Contesto di lavoro</a></li>
                        <li><a tabindex="" title="" href="#" ng-click="logout()"><i class="fa fa-sign-out"></i>&nbsp;Esci</a></li>
                    </ul>
                </li>

这是我加载的样式和脚本:

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/isteven-angular-multiselect/isteven-multi-select.css",
          "node_modules/fullcalendar/dist/fullcalendar.min.css",
          "node_modules/font-awesome/css/font-awesome.min.css",
          "node_modules/angular-snap/angular-snap.min.css",
          "node_modules/nvd3/nv.d3.min.css",
          "node_modules/angular-ui-bootstrap-datetimepicker/datetimepicker.css",
          "node_modules/angular-toggle-switch/angular-toggle-switch-bootstrap.css",
          "node_modules/angular-block-ui/dist/angular-block-ui.css",
          "node_modules/angular-ui-select/select.css",
          "node_modules/selectize/dist/css/selectize.default.css",
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/jszip/dist/jszip.js",
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/moment/moment.js",
          "node_modules/moment-timezone/moment-timezone.js",
          "node_modules/moment-timezone/moment-timezone-utils.js",
          "node_modules/sifter/sifter.min.js",
          "node_modules/fullcalendar/dist/fullcalendar.min.js",
          "node_modules/fullcalendar/dist/gcal.js",
          "node_modules/fullcalendar/dist/lang-all.js",
          "node_modules/datatables.net/js/jquery.dataTables.min.js",
          "node_modules/spin.js/spin.js",
          "node_modules/datatables.net-plugins/sorting/datetime-moment.js",
          "node_modules/angular/angular.js",
          "node_modules/angular-resource/angular-resource.min.js",
          "node_modules/angular-translate/dist/angular-translate.min.js",
          "node_modules/angular-i18n/angular-locale_it-it.js",
          "node_modules/angular-route/angular-route.min.js",
          "node_modules/angular-ui-utils/modules/utils.js",
          "node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js",
          "node_modules/angular-sanitize/angular-sanitize.min.js",
          "node_modules/angular-ui-select/select.js",
          "node_modules/bootstrap/dist/js/bootstrap.js",
          "node_modules/angular-datatables/dist/angular-datatables.min.js",
          "node_modules/datatables.net-responsive/js/dataTables.responsive.js",
          "node_modules/angular-snap/angular-snap.min.js",
          "node_modules/snap.js/dist/snap.min.js",
          "node_modules/angular-toggle-switch/angular-toggle-switch.min.js",
          "node_modules/angular-spinner/dist/angular-spinner.min.js",
          "node_modules/d3/d3.min.js",
          "node_modules/nvd3/nv.d3.min.js",
          "node_modules/angularjs-nvd3-directives/dist/angularjs-nvd3-directives.min.js",
          "node_modules/ckeditor/ckeditor.js",
          "node_modules/ng-file-upload/dist/angular-file-upload.min.js",
          "node_modules/angular-ckeditor/angular-ckeditor.min.js",
          "node_modules/angular-css-injector/angular-css-injector.min.js",
          "node_modules/ui.bootstrap.datetimepicker/dist/datetime-picker.min.js",
          "node_modules/angular-block-ui/dist/angular-block-ui.min.js",
          "node_modules/node-forge/dist/forge.min.js",
          "node_modules/ngjs-color-picker/js/ngjs-color-picker.js",
          "node_modules/angular-ui-calendar/src/calendar.js",
          "node_modules/draggabilly/dist/draggabilly.pkgd.min.js"
        ]

编辑:浏览器的控制台没有显示任何错误。我正在使用 Angular 10

斯达多

我找到了解决方案。我用了

<a data-toggle="dropdown" href="#" style="padding-right: 7px;padding-left: 7px;" class="dropdown-toggle" ng-click="$event.preventDefault(); opzioniIndexIsOpen = !opzioniIndexIsOpen;" title="Apri"></a>

代替:

<a data-toggle="dropdown" href="#"  style="padding-right: 7px;padding-left: 7px;" class="dropdown-toggle" ng-click="$event.stopPropagation(); opzioniIndexIsOpen = !opzioniIndexIsOpen" title="Apri"></a>.

尽管如此,我还是无法理解问题的原因。在AngularJS项目中,这段代码运行正常。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

我的下拉菜单不起作用

Angular UI Bootstrap的两个下拉菜单不起作用

带有Angular和ui-router的Navbar下拉菜单不起作用

带有 Bootstrap 4.1.3 的 Angular6 中的下拉菜单不起作用

角度引导问题angular.bootstrap在我的应用程序上不起作用

为什么 RoutingModule 在我的 angular 应用程序中不起作用?

Ng-hide在我的Angular / Firebase应用程序中不起作用

我的可点击 jQuery 下拉菜单不起作用

angular :我想要一个有角度的构建。但是有一个错误

我能够创建一个下拉菜单,但我希望它位于python主程序的GUI内

下拉菜单中的angular6下拉菜单不起作用

为什么我的下拉菜单在我的foreach循环中不起作用?的PHP

带有 href 的链接在 Angular 应用程序中不起作用

我需要一个下拉菜单,但是当我将位置设置为“固定”时,它不起作用

带有引导程序的多个下拉菜单不起作用?

我的下拉菜单不起作用-JS出现问题

为什么我的下拉菜单在 div 中不起作用?

下拉菜单不起作用。它只是向我展示了 <li> 里面的内容

为什么我的下拉菜单不起作用?(HTML&CSS)

如何向我的 angular 7 应用程序添加一个简单的对话框?

我可以有一个混合的 es5 / es2015 AngularJS 应用程序吗?

我有一个混合类型的数组对象。我需要按类型拆分

Angular Httpclient 帖子不起作用,但我无法捕捉到任何异常

插槽 setShowGride 在我的应用程序中不起作用

Fontawesome 在我的 React 应用程序中不起作用

BroadcastReceiver在我的Android应用程序中不起作用

CopyAsync 方法在我的应用程序中不起作用

我的openshift应用程序PDO查询不起作用

关闭 jquery 中的上一个下拉菜单不起作用