Angularjs 自举&x2B；角度动态菜单在展开后不折叠_Angularjs_Twitter Bootstrap_Dynamic_Collapse

Angularjs 自举&x2B；角度动态菜单在展开后不折叠

angularjs twitter-bootstrap dynamic

Angularjs 自举&x2B；角度动态菜单在展开后不折叠,angularjs,twitter-bootstrap,dynamic,collapse,Angularjs,Twitter Bootstrap,Dynamic,Collapse,我有以下代码，我试图显示一个可折叠的菜单，我用AngularJS调用其中的项目： <div class="btn-group" role="group"> <button type="button" class="btn navbar-toggle collapsed" data-toggle="collapse" data-target="#SearchMenu" aria-expanded="false"> <i class="glyph

我有以下代码，我试图显示一个可折叠的菜单，我用AngularJS调用其中的项目：

<div class="btn-group" role="group">
    <button type="button" class="btn navbar-toggle collapsed" data-toggle="collapse" data-target="#SearchMenu" aria-expanded="false">
        <i class="glyphicon glyphicon-th-list"></i>
        <i class="glyphicon glyphicon-chevron-down"></i>
        Search Menu
    </button>
</div>

<div class="collapse navbar-collapse" id="SearchMenu">
    <div class="row">
        <div class="col-md-10">
            <ul class="nav navbar-nav">
                <li class="dropdown" ng-repeat="menuDetail in menu.data" >
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{menuDetail.item.displayName}}<span ng-if="menuDetail.submenu" class="caret"></span></a>
                    <ul class="dropdown-menu" ng-if="menuDetail.submenu">
                        <li ng-repeat="submenu in menuDetail.submenu"><a href="">{{submenu.displayName}}</a></li>
                    </ul>
                </li>
                <li>
                    <a href="" class="icon-menu-padding" data-toggle="tooltip" data-placement="bottom" title="Configurations">
                        <span class="glyphicon glyphicon-cog"></span><span class="hidden-md hidden-sm"> Config</span>
                    </a>
                </li>
                <li>
                     <a href="" class="icon-menu-padding" data-toggle="tooltip" data-placement="bottom" title="Help">
                        <span class="glyphicon glyphicon-question-sign"></span><span class="hidden-md hidden-sm"> Help</span>
                     </a>
                </li>
                <li>
                     <a href="#/" class="icon-menu-padding" data-toggle="tooltip" data-placement="bottom" title="Logout">
                        <span class="glyphicon glyphicon-log-out"></span><span class="hidden-md hidden-sm"> Logout</span>
                     </a>
                </li>
            </ul>
        </div>
    </div>
</div>


搜索菜单

在运行时，如果无法连接到服务器检索菜单项，则可以正常工作（即使没有大多数选项，也可以正确显示和隐藏）。但当在服务器上运行它，并在chrome和IE中使用F12进行调试时，在显示菜单后，无法再次折叠

当我点击按钮再次隐藏菜单时，Chrome开发者工具指示它发生了变化（见第一张图片），但过了一会儿，它又回到了原来的状态（见第二张图片），因此我无法再次隐藏菜单

有什么想法或建议吗

谢谢

我认为您在加载依赖项时遇到了一些问题，因为您给我们的代码工作正常。你可以看看这个

如果要混合使用简单引导和角度引导，则必须按顺序加载它们，如下所示：

Bootsrap-css

jQueryJS

引导js

角js


...
...

解决了。事实证明，我有一个完整的HTML（带有HTML和body标记）插入到一个视图中。我应该只从div部分插入html。奇怪的是，Chrome的工作很好，但我无法处理

谢谢

<head>
  ...
  <link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js">
  ...
</head>