bootstrap和ui-bootstrap

Question

项目要用到下拉列表的组件，直接把bootstrap3.3.5的拿来用了，页面引入了bootstrap.js这个问题文件，后面用到模态框，ui-bootstrap，看到有两个bootstrap.js，就同一类一下，把引用改为ui-bootstrap中的bootstrap.js了，突然下拉列表就不能用了，换回去就可以了
这是为什么？两个有什么区别呢？

主要功能就是上面的a标签点击后会打开下面的ul
引入bootstrap.js就可以实现
引入ui-bootstrap中的bootstrap.js就不行

---

<div class="dropdown" ng-click="getResource()">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" nav-fold>
                    <span>资源中心</span>
                    <span class="caret"></span>
                </a>
                <div class="dropdown-menu topbar_list">
                    <div class="top_baseResource">
                        <div class="top_resourceTitle">
                            <strong>基础资源库</strong>
                        </div>
                        <div class="top_resourceContent">
                            <ul>
                                <li ng-repeat="baseResource in baseResources.ITEMS | limitTo : 11">
                                    <img class="nav_icon" ng-src="resourceCenter/img/{{baseResource.REPOSITORYICON}}.png">
                                    <span ng-bind="baseResource.VIEWNAME"></span>
                                </li>
                                <li>
                                    <a ui-sref="resourceCenter.baseResource" go-to-url="turnoff" url-index="0" display-state="displayState">更多>></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="top_recomResource">
                        <div class="top_resourceTitle">
                            <strong>复合资源库</strong>
                        </div>
                        <div class="top_resourceContent">
                            <ul>
                                <li ng-repeat="recomResource in recomResources.ITEMS | limitTo : 11">
                                    <img class="nav_icon" ng-src="resourceCenter/img/{{recomResource.REPOSITORYICON}}.png">
                                    <span ng-bind="recomResource.VIEWNAME"></span>
                                </li>
                                <li>
                                    <a ui-sref="resourceCenter.recomResource" go-to-url="turnoff" url-index="1" display-state="displayState">更多>></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="top_cacheResource">
                        <div class="top_resourceTitle">
                            <strong>数据缓存库</strong>
                        </div>
                        <div class="top_resourceContent">
                            <ul>
                                <li ng-repeat="cacheResource in cacheResources.ITEMS | limitTo : 5">
                                    <img class="nav_icon" ng-src="resourceCenter/img/{{cacheResource.REPOSITORYICON}}.png">
                                    <span ng-bind="cacheResource.VIEWNAME"></span>
                                </li>
                                <li>
                                    <a ui-sref="resourceCenter.cacheResource" go-to-url="turnoff" url-index="2" display-state="displayState">更多>></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

ui-bootstrap.js和 bootstrap.js不一样，一个事基于angular的，一个是基于jq的。如果你用的angular就不用jq的了

Answer 2

bootstrap 有一些组件是需要用 JavaScript 实现，所以就需要 bootstrap.js (它是基于JQuery实现的)，而 ui-bootstrap 是这些组件基于 angular 实现的，所以如果你使用 ui-bootstrap ，就不要引入 bootstrap.js 到你的页面了。