Html 引导下拉列表在angularjs中不起作用

我想在点击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>
</div>

{{$scope.userLocalData[0].uname}

您的代码包含一些无效的HTML标记。例如，我假设您是指锚元素的

role=“button”

，而不是

type=“button”

。此外，您应该使用

href=“#”

或

数据目标=“#”

而不是

href=“javascript:void（0）；”

。你可以试试这个：

<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>

{{$scope.userLocalData[0].uname}

不确定您的问题。非常不清楚。但如果有帮助的话，@giri我的问题是，我用这个代码在点击img标签时显示下拉列表，但点击后什么也没发生。像这样的。。。我没有看到任何事件绑定到您的图像标签，您需要添加一个

ng单击

directive@srv尝试添加该库并进行设置，因为您正在使用angular，绑定需要通过一个指令。如果没有，它可能仍然有效，但我建议使用我建议的库。