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