我有一个混合角度应用程序，我的下拉菜单不工作

Question

我正在构建一个混合角度应用程序，我有一个问题，我的下拉菜单。它没有打开，相反，它重新指引了我。我认为依赖项的加载顺序是正确的。我正在使用引导3.1.1和jQuery2.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>

每张房署单程票->

                        <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"
        ]

编辑:浏览器的控制台没有显示任何错误。我用的是角10

Answer 1

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

<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项目中，这段代码正常工作。

Answer 2

请删除<a>在<li>中的标签

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

在<a>标记上放置ng单击事件不是一个好主意。

请参阅这里的例子，其中另一个人有同样的问题：

href overrides ng-click in Angular.js

提示:您可以使用<button>绑定单击事件函数。

如果您仅限于使用<a>标签，请尝试此方法，我从上面的文章中得到了参考。

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

或

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