anglejsでブートストラップのドロップダウンが機能しない

Question

強いテキスト imgアイコンのクリックでドロップダウンを表示したいのですが、ドロップダウンがクリックでは開きません。ここに私のコードです...どんなリードも高く評価されます。

<div class="dropdown"> 
<a href="javascript:void(0);" class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    <span class="user-image" style="background-image: url('../images/rafi.jpg');"></span> 
</a> 
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li> 
     <div class="profile-pic"> 
      <img src="images/rafi.jpg" alt="Rafi Ali Khan"> 
     </div> 
    </li> 
    <li> 
     <h3>{{$scope.userLocalData[0].uname}}</h3></li> 
    <li><a href="" class="text-right">Profile</a></li> 
    <li><a href="" class="text-right">Log Out</a></li> 

</ul> 

Answer 1

あなたのコードは、いくつかの無効なHTMLマークアップが含まれています。たとえば、アンカー要素にtype="button"の代わりにrole="button"を意味すると仮定します。また、href="javascript:void(0);"の代わりにhref="#"またはdata-target="#"を使用する必要があります。これを試すことができます：

<div class="dropdown"> 
    <a href="#" class="dropdown-toggle" role="button" id="dropdownMenu1" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
    <span class="user-image" style="background-image: url('../images/rafi.jpg');"></span> 
    </a> 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li> 
     <div class="profile-pic"> 
     <img src="images/rafi.jpg" alt="Rafi Ali Khan"> 
     </div> 
    </li> 
    <li><h3>{{$scope.userLocalData[0].uname}}</h3></li> 
    <li><a href="" class="text-right">Profile</a></li> 
    <li><a href="" class="text-right">Log Out</a></li> 
    </ul> 
</div>