引导下拉菜单在 angularjs 中不起作用答案

【问题标题】：bootstrap dropdown not working in angularjs引导下拉菜单在 angularjs 中不起作用
【发布时间】：2016-05-04 06:00:22
【问题描述】：

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

【问题讨论】：

不确定您的问题。很不清楚。但如果有帮助，angular-ui.github.io/bootstrap
@giri 我的问题是我正在使用此代码在单击 img 标签时显示下拉菜单，但单击时没有任何反应。像这样...getbootstrap.com/components/#dropdowns
我没有看到任何绑定到您的图像标签的事件，您需要添加一个ng-click 指令
@srv 尝试添加该库并进行设置，因为您使用的是角度，绑定需要通过指令。没有它可能仍然可以工作，但我建议使用我建议的库。

标签： html angularjs dropdown

【解决方案1】：

您的代码包含一些无效的 HTML 标记。例如，我假设您的意思是 role="button" 而不是 type="button" 用于锚元素。此外，您应该使用href="#" 或data-target="#" 而不是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>

【讨论】：