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

Question

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

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

这段代码只是通过检查.dropdown类是否具有“ open”类来检查是否显示了下拉菜单。 如果不是，则它将打开在新窗口中传递的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>