Question

我在angularjs项目中使用bootstrap 3下拉切换菜单，一切似乎都运行正常但在使用angular ui bootstrap（angular-ui-bootstrap.min.js）之后，bootstrap 3下拉切换菜单无效（意思是它不开放）。有没有人有同样的问题？请帮我解决这个问题。

的index.html

<ul class="nav nav-list">
                <li>
                    <a href="index.html">
                        <i class="icon-dashboard"></i>
                        <span class="menu-text"> Dashboard </span>
                    </a>
                </li>

                <li>
                    <a href="#" class="dropdown-toggle">
                        <i class="icon-building"></i>
                        <span class="menu-text"> Projects </span>

                        <b class="arrow icon-angle-down"></b>
                    </a>

                    <ul class="submenu">
                        <li>
                            <a href="#">
                                <i class="icon-double-angle-right"></i>
                                Find Project
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <i class="icon-double-angle-right"></i>
                                Create Project
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <i class="icon-double-angle-right"></i>
                                Update Project
                            </a>
                        </li>    

                    </ul>
                </li>
<ul>

Answer 1

你需要以Angularjs的方式做到这一点：

确保包括：

指数：

<ul class="nav nav-list">
    <li>
      <a href="index.html">
        <i class="icon-dashboard"></i>
        <span class="menu-text"> Dashboard </span>
      </a>
    </li>
    <li class="dropdown" ng-controller="DropdownCtrl">
      <a class="dropdown-toggle">
        <i class="icon-building"></i>
        <span class="menu-text"> Projects </span>
        <b class="arrow icon-angle-down"></b>
      </a>
        <ul class="dropdown-menu">
          <li ng-repeat="choice in items">
            <i class="icon-double-angle-right"></i>
            <a>{{choice}}</a>
          </li>
        </ul>
    </li>
<ul>

JS：

angular.module('plunker', ['ui.bootstrap']);
function DropdownCtrl($scope) {
  $scope.items = [
    "Find Project",
    "Create Project",
    "Update Project"
  ];
}

使用AngularJS UI Bootstrap时，Bootstrap 3下拉切换菜单不起作用

1 个答案: