Customized ui.bootstrap.dropdown menu

Vote count:

0

I'm trying to use ui.bootstrap.dropdown for dropdown menu panel. In all examples the dropdown menu contains only list. I need to create custom menu. For example:

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

The problem with this approach is that dropdown menu closes upon click on any place. I need the menu to close only by click on internal buttons, link, etc. One workaround that I did was specifying controller's handle:

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

It's workaround since I have many dropdown menus and each should have this handler. I think it would be better either to specify overridden dropdown-menu or use other component. My questions are:

1. Is is possible to disable click event on dropdown-menu except click on internal elements in HTML?


2. How to override dropdown-menu with custom handler of close menu functionality?


3. Is it possible to use different UI component for this purposes?

asked 39 secs ago

Glaxalg

220