角度アプリでのドロップダウントグルの問題

Question

私はブートストラップライブラリを使用しています。私がドロップダウントグルクラスをクリックすると、ドロップダウンが予想どおりに表示/非表示になります。

HTMLスニペットの下部にある画像をクリックすると、javascriptコードにあるng-click angleディレクティブが有効になります。

このコードでは、.dropdownクラスに 'open'のクラスがあるかどうかをチェックすることで、ドロップダウンメニューが表示されているかどうかを確認するだけです。そうでない場合は、新しいウィンドウで渡されたURLが開きます。そうでなければ、ドロップダウンメニューを隠す「開かれた」クラスが削除されます。

問題は、同じ.dropdownクラスをクリックしてドロップダウンを再びアクティブにしようとすると、2回以上クリックした後にのみ表示されるという問題です。

私は明らかに誰かが私が間違っていることを示唆することができる 'オープン'クラスを削除してドロップダウンを破壊する正しい方法をやっていないのですか？私はイメージをクリックしないので、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>