angularjs – UI Bootstrap下拉指令导致multidir问题

发布时间：2020-12-17 17:56:01 所属栏目：安全来源：网络整理

导读：嗨,我正在尝试从UI Bootstrap中获取下拉指令.每当我尝试使用’dropdown’指令时,我都会收到以下错误消息：控制台错误消息： Multiple directives [dropdown,dropdown] asking for 'dropdown' controller on: li class="dropdown pos-stc" dropdown=""http:/

嗨,我正在尝试从UI Bootstrap中获取下拉指令.每当我尝试使用’dropdown’指令时,我都会收到以下错误消息：

控制台错误消息：

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

有人能告诉我这个错误是什么吗？当我删除指令一切都很好,除了下拉菜单不起作用:(

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>

解决方法

假设您没有使用最新版本的bootstrap.以前的版本(例如：0.11.0)除了属性限制(A)之外还有指令类限制(C).因此,您通过指定类以及属性来重复元素的指令.这会导致多个指令错误.你可以使用classname,因为无论如何你都需要它来适用于适当的内置bootstrap css规则.即改变< li class =“dropdown”dropdown>到< li class =“dropdown”>或者将其升级到bootstrap 0.12.0.

尝试：

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

请记住,当您将其升级到版本0.12.0或更高版本时,它们已删除了对指令的类限制,并且它们将根据使用的角度版本进行默认指令限制.因此,您需要切换回现在的方式.见this answer for more details.

似乎问题的原因可能是因为您从官方网站引用了演示,但使用旧版本的bootstrap.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!