Question

我使用angularJS创建了一个联系表单，当我尝试将其集成到我使用bootstrap构建的页面中时，Navbar下拉菜单和切换按钮不起作用。如何以最好和最简单的方式解决它？

<div class="navbar navbar-inverse navbar-static-top" role="navigation">

    <div class="container">

        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false"><span class="glyphicon glyphicon-briefcase"></span> Our Product<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">A Collaborative Solution </a></li>
                        <li><a href="#">A Robust Platform</a></li>
                        <li><a href="#">How It Works</a></li>

                    </ul    

                </li>
                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false"><span class="glyphicon glyphicon-user"></span> About Us<b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#">Our Team</a></li>
                        <li><a href="#">Our Advisory Board</a></li>
                        <li><a href="#">Our Partners</a></li>
                        <li><a href="#">Our Customers</a></li>


                    </ul>
                </li>
                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false"><span class="glyphicon glyphicon-list-alt"></span> In the News<b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#">Press Releases</a></li>
                        <li><a href="#">Industry News</a></li>
                    </ul>
                </li>
                <li class="active"><a href="#"><span class="glyphicon glyphicon-envelope"></span> Contact Us   </a></li>
            </ul>
        </div>  
    </div>
</div>

感谢您的帮助！

Answer 1

不要使用Bootstrap的js文件并尝试避免使用Angular的jQuery（不应该使用jQuery）。相反，只需添加 UI Bootstrap ，它就会将bootstrap的JavaScript功能添加为Angular指令。

包含ui-bootstrap脚本：

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>

然后，将其作为模块依赖项注入您的应用程序：

angular.module('myApp', [
  'ui.bootstrap'
]);

这将使Bootstrap组件在您的应用程序中运行。请务必阅读用于UI Bootstrap的documentation。

在引导程序设计页面中集成AngularJS联系表单 - Navbar的下拉菜单无法正常工作

1 个答案: