AngularJS和Bootstrap無法與下拉列表一起使用

Question

因此，我的問題涉及為什么我的下拉菜單不適用於我的導航欄。 當所有HTML都在一個文檔中時有效，但是當我使用ng-include時則無效。 我不是使用Bootstrap，而是使用MetroUI-CSS。

index.html

<div id="container">
    <div id="header" ng-include="'app/templates/header.html'"></div><!-- End header container -->
</div>

partial / header.html

<div id="site_nav_bar">
    <nav class="navigation-bar dark fixed-top shadow">
        <nav class="navigation-bar-content">
            <item class="element"><i class="icon-keyboard" style="padding-right: 1em"></i> <a href="index.html">Home</a></item>
            <item class="element-divider"></item>
            <item class="element"><a href="#/about.html">About</a></item>
            <item class="element"><a href="#/contact.html">Contact</a></item>

            <ul class="element-menu">
                <li>
                    <a class="dropdown-toggle" href="#">Blogs</a>
                    <ul class="dropdown-menu" data-role="dropdown">
                        <li>
                            <a href="#" class="dropdown-toggle">Programming Blogs</a>
...
                        </li>

因此，基本上，當我單擊“博客”時，它不會下拉菜單。

Answer 1

Bootstrap僅在准備就緒（就緒事件）時評估DOM，因此，如果此時存在您的下拉列表，它將起作用，否則，如果稍后將其添加到DOM中（例如使用ng-include），它將不會。

ng-include在幕后為您處理DOM並執行AJAX請求以檢索要包含的HTML。 bootstrap不知道這一點，因此不會等待DOM更新。

避免使用bootstrap-ui