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

【问题标题】：Bootstrap 3 dropdown toggle menu not working when using with AngularJS UI Bootstrap与 AngularJS UI Bootstrap 一起使用时，Bootstrap 3 下拉切换菜单不起作用
【发布时间】：2014-03-27 20:10:57
【问题描述】：

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

索引.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>

【问题讨论】：

标签： twitter-bootstrap-3 angular-ui-bootstrap

【解决方案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"
  ];
}

【讨论】：