我有一个 Hybrid Angular 应用程序，但我的下拉菜单不起作用

Question

我正在构建一个混合 angular 应用程序，但我的下拉菜单有问题。它没有打开，而是重定向了我。我认为依赖项以正确的顺序加载。我正在使用 bootstrap 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 ticket a HD Sole -->

                        <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

Answer 1

请删除 <li>

内的 <a> 标签

标签有一个 href，它将把你重定向到路径 "#"。

将 ng-click 事件放在 <a> 标记上不是一个好主意。

请在此处查看另一个人遇到相同问题的示例：
href overrides ng-click in Angular.js

提示：可以使用<button>绑定点击事件函数

如果你仅限于使用<a>标签，请尝试我从上面参考的这个方法post。

<a href="#" ng-click="$event.preventDefault();logout()"></a>

或

<a href="" ng-click="logout()"></a>

Answer 2

我找到了解决办法。我用了

<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项目中，这段代码运行正常

我有一个 Hybrid Angular 应用程序，但我的下拉菜单不起作用

I have an Hybrid Angular app and my dropdown menu doesn't work

html

jquery

drop-down-menu

twitter-bootstrap-3

angular