angular bootstrap dropdown error: d.init is not a function

Question

I am trying to use UI Bootstrap dropdown directive for angular (https://angular-ui.github.io/bootstrap/#/dropdown).

I am copying the example just as is on the page (for a single button), and I get this error:

TypeError: d.init is not a function

Here's the markup:

<div class="album-selector col-sm-12" ng-controller="DropdownController">
  <div class="btn-group" dropdown is-open="status.isopen">
    <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
      Button dropdown <span class="caret"></span>
    </button>
  </div>
  <ul class="dropdown-menu" role="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>
  </ul>
</div>

And this is the controller:

angular.module('DropdownCtrl', ['ui.bootstrap']).controller('DropdownController', function ($scope) {

  $scope.items = [
    'The first choice!',
    'And another choice for you.',
    'but wait! A third!'
  ];

  $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;
  };
});

NOTE: It seems that the 'd.init' error happens just by writing 'dropdown' on the div (or anywhere on the document), removing that directive makes the error go away but the dropdown is still not working.

NOTE2: I am already using other UI Bootstrap directives on the same page I get this error, like Carousel, Buttons, Modal, etc. This happens only with the dropdown directive.

Andy Lewis · Accepted Answer · 2015-06-30 14:46:35Z

1

You have a conflict in your controller name.

Angular-UI uses 'DropdownController' as one of its internal controllers.

Change the Controller name to something else and it should work. Generally it's good practice to have some sort of convention to your controller naming. For example if you module was called 'Dropdown' you might add 'dd' to the start of every controllers name in it.

answered Jun 30, 2015 at 14:46

Andy Lewis

3341 silver badge7 bronze badges

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

Collectives™ on Stack Overflow

angular bootstrap dropdown error: d.init is not a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related