Question

我正在尝试使用ui-bootstrap将使用bootstrap创建的静态站点迁移到角度，这样就可以在每一步中对抗我，所以我需要一个可能曾经使用过ui-bootstrap的人指向我正确的方向。我对Angular还有些新手，但我对bootstrap和ui-bootstrap都是新手，我通常只是尝试自己编写CSS。

这是工作静态引导程序html，删除了一些不相关的细节：

<div class="top-bar">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 hidden-sm-down">
                    <ul class="list-inline">
                        <li class="list-inline-item"><a href="javascript:void(0)"><i class="ion-ios-telephone"></i>Location 1: 1.111.111.1111</a></li>
                        <li class="list-inline-item"><a href="javascript:void(0)"><i class="ion-ios-telephone"></i>Location 2: 1.111.111.1111</a></li>
                    </ul>
                </div>
                <div class="col-sm-6 text-right">
                    <ul class="list-inline">
                        <li class="loc list-inline-item">
                           <a href="#" data-toggle="dropdown" class="dropdown-toggle">Get Directions</i></a>
                            <ul class="dropdown-menu loc-dropdown">
                                <li><a href="https://www.google.com/maps" target="_blank"><i class="ion-android-car flag"></i> Location 1</a></li>
                                <li><a href="https://www.google.com/maps"><i class="ion-android-car flag" ></i> Location 2</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

当我第一次遇到这个麻烦时，我找到了这个帖子：

Angularjs bootstrap dropdown not working

所以我尝试了第一个明显不起作用的解决方案，这就是我试图应用第二个更新的修复：

<div class="top-bar">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 hidden-sm-down">
                    <ul class="list-inline">
                        <li class="list-inline-item"><a href="javascript:void(0)"><i class="ion-ios-telephone"></i>Location 1: 1.111.111.1111</a></li>
                        <li class="list-inline-item"><a href="javascript:void(0)"><i class="ion-ios-telephone"></i>Location 2: 1.111.111.1111</a></li>
                    </ul>
                </div>
                <div class="col-sm-6 text-right">
                    <ul class="list-inline">
                        <li uib-dropdown class="loc list-inline-item">
                           <a uib-dropdown-toggle class="dropdown-toggle">Get Directions</i></a>
                            <ul uib-dropdown-menu class="dropdown-menu loc-dropdown">
                                <li><a href="https://www.google.com/maps" target="_blank"><i class="ion-android-car flag"></i> Location 1</a></li>
                                <li><a href="https://www.google.com/maps"><i class="ion-android-car flag" ></i> Location 2</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

没有任何事情发生，没有任何错误。我甚至没有得到一个游标：指针，即使我添加了

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

就像ui-bootstrap所说的那样，在我的CSS之上。

我尝试下载ui-bootstrap而不是使用cdn，它没有任何区别。最初这是我正在构建的导航指令模板中的所有内容，我认为这可能导致了问题，但我将所有内容都移到了主页状态，我遇到了同样的问题。我尝试在家庭状态控制器中的下拉指令控制器中移动所有内容，但没有任何反应。我还尝试将下拉示例plunker html和js复制并粘贴到我的项目中，但仍然有相同的结果..

可能值得注意的事情：

我正在使用gulp来捆绑我的js和自定义css，但这些都没有应用于这个片段。

我正在使用nodemon在localhost

上提供服务

我正在将这些CDN用于CSS：

<!-- Normalize -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" />
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

和JS的这些：

<!-- angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<!-- angular animate -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<!-- angular sanitize -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<!-- angular ui-router -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<!-- angular ui-bootstrap -->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>

我在这里不知所措，我一定会错过一些我看不见的东西。

ui-bootstrap下拉列表无效

0 个答案: