Question

我尝试使用ui.bootstrap.dropdown进行下拉菜单面板。在所有示例中，下拉菜单仅包含列表。我需要创建自定义菜单。例如：

<li class="dropdown floating-panel user-settings open">
  <a class="dropdown-toggle" data-toggle="dropdown">
    <i class="fa fa-ellipsis-v"></i>
  </a>
  <div class="dropdown-menu">
    <h4>User info</h4>
      <div ng-show="userId() !== null" class="ng-binding">****</div>
        <button class="btn btn-primary" type="submit" ng-click="onSignOut()">
          <i class="fa fa-sign-in"></i>
          Sign out
        </button>
        <br>
        ...
      </div>
</li>

这种方法的问题是点击任何地方时关闭下拉菜单。我只需点击内部按钮，链接等即可关闭菜单。我做的一个解决方法是指定控制器的句柄：

$scope.$on ('click', function (event) {
  if (event.toElement.className === 'dropdown-menu'){
     event.stopPropagation();
  }
}

它的解决方法因为我有很多下拉菜单，每个都应该有这个处理程序。我认为指定重写的下拉菜单或使用其他组件会更好。我的问题是：

是否可以在下拉菜单中禁用点击事件，除非点击HTML中的内部元素？
如何使用关闭菜单功能的自定义处理程序覆盖下拉菜单？
是否可以为此目的使用不同的UI组件？

自定义ui.bootstrap.dropdown菜单

0 个答案: