UI Bootstrap dropdown directive causes multidir issue

Question

Hi I'm trying to get the dropdown directive from UI Bootstrap to work. Whenever I try to use the 'dropdown' directive, I get this error message:

Console error msg:

Multiple directives [dropdown, dropdown] asking for 'dropdown' controller on: <li class="dropdown pos-stc" dropdown="">
http://errors.angularjs.org/1.3.9/$compile/multidir?p0=dropdown&p1=dropdown&p2='dropdown'ontroller&p3=%3Cli%class%3D%dropdown%20pos-stc%22%20dropdown%3D%22%22%3E
    at http://localhost:9000/bower_components/angular/angular.js:63:12
    at assertNoDuplicate (http://localhost:9000/bower_components/angular/angular.js:7990:15)
    at applyDirectivesToNode (http://localhost:9000/bower_components/angular/angular.js:7339:11)
    at compileNodes (http://localhost:9000/bower_components/angular/angular.js:6997:15)
    at compileNodes (http://localhost:9000/bower_components/angular/angular.js:7009:15)
    at compileNodes (http://localhost:9000/bower_components/angular/angular.js:7009:15)
    at compile (http://localhost:9000/bower_components/angular/angular.js:6904:15)
    at link (http://localhost:9000/bower_components/angular/angular.js:22225:9)
    at invokeLinkFn (http://localhost:9000/bower_components/angular/angular.js:8213:9)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7722:11) angular.js:11594(anonymous function) angular.js:11594(anonymous function) angular.js:8544invokeLinkFn angular.js:8215nodeLinkFn angular.js:7722compositeLinkFn angular.js:7075publicLinkFn angular.js:6954boundTranscludeFn angular.js:7093controllersBoundTransclude angular.js:7749(anonymous function) angular.js:22173processQueue angular.js:13171(anonymous function) angular.js:13187Scope.$eval angular.js:14384Scope.$digest angular.js:14200Scope.$apply angular.js:14489done angular.js:9646completeRequest angular.js:9836requestLoaded

Can somebody tell me what the mistake could be? When I remove the directive everything is fine, except that the dropdowns dont't work :(

HTML:

  <li class="dropdown" dropdown>
    <a href class="dropdown-toggle clear" dropdown-toggle>
      <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
        <img src="img/a0.jpg" alt="...">
        <i class="on md b-white bottom"></i>
      </span>
      <span class="hidden-sm hidden-md">John.Smith</span> <b class="caret"></b>
    </a>
    <!-- dropdown -->
    <ul class="dropdown-menu animated fadeInRight w">
      <li class="wrapper b-b m-b-sm bg-light m-t-n-xs">
        <div>
          <p>300mb of 500mb used</p>
        </div>
        <progressbar value="60" class="progress-xs m-b-none bg-white"></progressbar>
      </li>
      <li>
        <a href>
          <span class="badge bg-danger pull-right">30%</span>
          <span>Settings</span>
        </a>
      </li>
      <li>
        <a ui-sref="app.page.profile">Profile</a>
      </li>
      <li>
        <a ui-sref="app.docs">
          <span class="label bg-info pull-right">new</span>
          Help
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a ui-sref="access.signin">Logout</a>
      </li>
    </ul>
    <!-- / dropdown -->
  </li>

Answer 1

Assuming you are not using the latest version of bootstrap. Previous versions (ex: 0.11.0) have the directives class restricted (C) as well apart from attribute restricted (A). So you are repeating the directive for the element by specifying the class as well as with the attribute. That causes multiple directive error. You could just go with the classname, because you would need it anyways for appropriate built-in bootstrap css rules to apply. i.e change <li class="dropdown" dropdown> to <li class="dropdown"> or upgrade it to bootstrap 0.12.0.

Try:

<li class="dropdown">
   <a href class="dropdown-toggle clear">

And remember that when you upgrade it to version 0.12.0 or greater they have removed the class restriction on the directives and they will be default directive restricted based on the angular version used. So you would need to switch back to the way you have it right now. See this answer for more details.

Seems like the cause of the issue might be because you referred to the demo from the official website but with older version of bootstrap.