Angular 应用程序中下拉切换的引导问题

Question

我正在使用 Bootstrap 库，当我单击下拉切换类时，它将按预期显示/隐藏下拉列表（因此称为切换）。

如果我单击 HTML sn-p 底部的图像，这将激活 javascript 代码中的 ng-click angular 指令。

此代码只是通过检查 .dropdown 类是否具有“打开”类来检查是否显示下拉菜单。如果没有，那么它将在新窗口中打开传递的 url，否则它将删除隐藏下拉菜单的 'open' 类。

我遇到的问题是，如果我尝试单击同一个 .dropdown 类以再次激活下拉菜单，它只会在我再单击两次后才会出现？？

我显然没有采取正确的方法来通过删除“开放”类来破坏下拉列表，有人可以建议我做错了什么吗？如果我不单击图像（因此不激活 ng-click 这一切正常），那么问题与 doInteractionBodyEvent() 有关，并且不知何故我没有正确“破坏”下拉列表。

// HTML

<div class="dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
   <span class="material-icons">more_vert</span>
</div>

<div>
    <div ng-if="interaction.media[0].image" class="image">
      <a ng-click="doInteractionBodyEvent(interaction.media[0].href)">
        <img ng-src="{{interaction.media[0].image.replace('amp;','')}}" />
      </a>
    </div>
</div>

// Javascript Angular 控制器

$scope.doInteractionBodyEvent = function(url) {
    if (angular.element('.dropdown').hasClass('open')) {
        angular.element('.dropdown').removeClass('open');

    } else {
        $window.open(url, '_blank');
    }
}

Answer 1

从 HTML 中删除 data-toggle="dropdown"

<div class="dropdown-toggle" type="button" id="dropdown1"  aria-haspopup="true" aria-expanded="true">
   <span class="material-icons">more_vert</span>
</div>