Question

对于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>

这是负责isCollapsed模型的控制器：

controllers.controller('CollapseCtrl', function ($scope) {
    $scope.isCollapsed = false;
});

我还制作了一个小gif，我要投入其中，这显示了我的实际问题。现在，我不太确定它是否存在于gif中，但似乎如果单击列表中的第一个元素，它就可以了。然后当第一个元素被切换，然后我点击下面的元素时，它就完全分开了。

gif showing my problem

EDIT1：

好的，我将指令从ng-show=""更改为collapse=""，仍然使用“isCollapsed”。现在它正在工作，但是折叠的盒子的高度太小了。

enter image description here

Answer 1

虽然我对此问题没有太多了解，但我强烈怀疑问题出现在这里：

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

请注意ng-click执行一次，但一旦变量发生变化，范围生命周期将多次重新计算范围。并且一旦依赖于isCollapsed的变量将改变，则再次重新计算范围，依此类推。这可能解释了标题窗格的异常打开和关闭。虽然我不确切地知道为什么会重新计算isCollapse。

解决方案：将其作为控制器内的方法移动。

Bootstrap UI Collapse指令表现得很奇怪

1 个答案: