Angular Bootstrap dropdown toggle not working

Question

I have an Angular Bootstrap dropdown menu that doesn't seem to be toggling the dropdown. On click, nothing shows up, although I can see the list items on inspect element.

HTML:

        <div ng-controller="DropdownCtrl">
            <!-- Simple dropdown -->
            <span class="dropdown" dropdown on-toggle="toggled(open)">
              <a href class="dropdown-toggle {{ disableDropdown }}" dropdown-toggle>
                <i class="fa fa-align-justify"></i>
              </a>
              <ul class="dropdown-menu port-dropdown-menu">
                <li>test</li>
                <li>test2</li>
                <li ng-repeat="choice in dropdown.items">
                    <a ui-sref="portfolio.port({portId: choice.id})">{{ choice.title }}</a>
                </li>
              </ul>
            </span>
        </div>

DropdownCtrl:

'use strict';

angular.module('portfolioManager').controller('DropdownCtrl', function ($scope,         portfolioCreateService) {

$scope.dropdown = {};

$scope.dropdown.items = portfolioCreateService.getDropdownTabs();

$scope.disableDropdown = portfolioCreateService.getDropdownClass();

$scope.$on('dropdownStatus', function(){
  $scope.disableDropdown = portfolioCreateService.getDropdownClass();
  console.log($scope.dropdown.items);
});

$scope.status = {
  isopen: false
};

$scope.toggled = function(open) {
  $log.log('Dropdown is now: ', open);
};

$scope.toggleDropdown = function($event) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope.status.isopen = !$scope.status.isopen;
};

});

can you provide a jsfidldle? I think its easier to achieve what you want with ng-show. — Avraam Mavridis
– Avraam Mavridis, Commented Dec 5, 2014 at 18:34
the dropdown is part of a fairly complex module in a large production app, so i'm not sure if a jsfiddle would be accurate or useful. — Daniel Bogart
– Daniel Bogart, Commented Dec 5, 2014 at 20:31
does things get logged i.e is ```toggled(open)`` getting called? — mido
– mido, Commented Dec 29, 2014 at 16:56
also try keeping the ul element outside the span element. — mido
– mido, Commented Dec 29, 2014 at 16:56

kvetis · Accepted Answer · 2015-01-20 10:44:20Z

1

I you're using lower version of angular than 1.3.0, then the <a href class="dropdown-toggle {{ disableDropdown }}" dropdown-toggle> binds two dropdown-toggle directives. Then when you click the element the first directive opens the dropdown and then the second one closes it immediately.

Delete the attribute dropdown-toggle from the element and it should work.

answered Jan 20, 2015 at 10:44

kvetis

7,4202 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1981275 · Accepted Answer · 2015-03-04 16:22:20Z

I have also faced problems with Original Bootstrap dropdown (also have imported the Angularjs UI Bootstrap), but it's something like: Only 2 clicks trigger the dropdown-menu, when I use it in an navbar just like the demo in Bootstrap's Offical Page. For example:

  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>

Only after I remove the data-toggle="dropdown", will the Original Bootstrap dropdown functioning well in an Navbar...Maybe it's because data-toggle="dropdown" will also let Angularjs UI Bootstrap binds dropdown-toggle directives.

Collectives™ on Stack Overflow

Angular Bootstrap dropdown toggle not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related