Html 引导UI折叠指令行为怪异

我对AngularJS的bootstrap.ui模块有点困惑

这是我的HTML：

<nav id="sidebar">      

    <ul id="main-nav" class="open-active">

        <li ng-controller="CollapseCtrl" class="dropdown">              
            <a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
                <i class="fa fa-wrench"></i>
                Verktøy
                <span class="caret"></span>
            </a>                

            <ul ng-show="isCollapsed" class="sub-nav">
                <li>
                    <a href="#/vernerunde">
                        <i class="fa fa-th-list"></i> 
                        Ny Vernerunde
                    </a>
                </li>
                <li>
                    <a href="#/interaksjon">
                        <i class="fa fa-gears"></i> 
                        Ny Interaksjon
                    </a>
                </li>
                <li>
                    <a href="#/brukerstyring">
                        <i class="fa fa-user"></i> 
                        Brukerstyring
                    </a>
                </li>
            </ul>
        </li>
        <li ng-controller="CollapseCtrl" class="dropdown">
            <a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
                <i class="fa fa-search"></i>
                Lister
                <span class="caret"></span>
            </a>                

            <ul ng-show="isCollapsed" class="sub-nav">
                <li>
                    <a href="#/list">
                        <i class="fa fa-desktop"></i> 
                        Alle
                    </a>
                </li>
            </ul>
        </li>                   
    </ul>

</nav>

我还制作了一个小gif，我将把它放进去，显示我的实际问题。现在，我不太确定它是否出现在gif中，但如果我单击列表中的第一个元素，它似乎会工作。然后，当第一个元素被切换时，我单击下面的元素，它就会完全分离

编辑1：

好的，我将指令从

ng show=“”

更改为

collapse=“”

，仍然使用“

isCollapsed

”。现在它工作了，但是折叠的盒子的高度太小了

---

虽然我对这个问题没有太多的了解，但我强烈怀疑问题就在这里：

<a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
    <i class="fa fa-wrench"></i>
    Verktøy
    <span class="caret"></span>
</a> 

请注意，

ng click

只执行一次，但一旦变量发生变化，作用域生命周期将多次重新计算作用域。一旦依赖于isCollapsed的变量发生变化，范围将再次计算，依此类推。这也许可以解释标题窗格不寻常的打开和关闭。虽然我不明白为什么要重新计算

isCollapse

---

解决方案：将其作为一种方法移动到控制器中。

得到它，将尝试并报告！嗨，又来了。这并没有解决问题，但至少让它工作得更顺利了。是的，我做了这个小提琴--。通常，它在创建时应该可以正常工作。也许您可以在代码的其余部分增强此功能，因为上面的代码之外显然存在触发此行为的内容。您是否尝试将折叠高度设置为自动？是的，但问题是css范围更高，指令生成了内联样式，因此它是不可更改的。也许我能做的是将更高元素的高度设置为自动？

<a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
    <i class="fa fa-wrench"></i>
    Verktøy
    <span class="caret"></span>
</a>