Question

这与issue 19930383

类似

<div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only" style="background-color:white">Toggle navigation</span>
            <span class="icon-bar" style="background-color:white"></span>
            <span class="icon-bar" style="background-color:white"></span>
            <span class="icon-bar" style="background-color:white"></span>
        </button>
        <div id="header-logo" ng-click="go('/start', 'slideUp')">
            <img src="image.png" alt="" class="">
            <div id="bluebar"></div>
        </div>

</div>

问题是我只能展开折叠的导航栏，不能缩小它。

我意识到每当我点击导航栏切换按钮时，页面就会重新加载。

我已经尝试删除了数据切换＆＃39;属性，使页面停止重新加载（并且栏停止扩展），因此必须是导致此行为的原因。

编辑感谢您的帮助，我使用angular-ui 解决了这个问题，正如charlieftl和l34p3r推荐

Answer 1

在上面的chartlietfl评论中添加更多细节，在这种情况下，Bootstrap.js和Angular在某种程度上相互矛盾。 Angular邀请使用directives来使用JavaScript处理接口组件。如果你想使用带有Angular的Bootstrap，你可以使用Angular-ui Bootstrap最简单的时间，它为你提供Angular指令中包含的所有Bootstrap.js功能。使用ui-bootstrap肯定会减少你需要使用的代码来单独应用Bootstrap的JS功能。

Here's another question that benefitted from converting to ui-bootstrap from the standard Bootstrap functionality when using a button trigger for toggling a collapsible element。问题中的HTML与答案之间的差异可以用作比较ui-bootstrap集成之前和之后代码的外观的模型。具体来说，看看他们如何换出data-toggle，转而使用ngClick来切换折叠状态。

希望有所帮助。

与角度配对时，Bootstrap数据切换重新加载页面

1 个答案: