Проблема с загрузкой с выпадающим переключателем в угловом приложении

Question

Я использую библиотеку Bootstrap, и когда я нажимаю на раскрывающийся список, это отображает/скрывает выпадающее меню, как ожидалось (отсюда и его вызываемый переключатель).

Если я нажму на изображение внизу фрагмента HTML, это активирует угловую директиву ng-click, содержащуюся в javascript-коде.

Этот код просто проверяет, отображается ли выпадающее меню, проверяя, имеет ли класс .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 Угловая контроллер

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

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

Answer 1

Удалите данные рычажками = "выпадающий" из HTML

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