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>