当与angular配对时，引导数据切换重新加载页面

Bootstrap data-toggle reloads page when paired with angular

本文关键字：新加载 加载 angular 数据 当与      更新时间：2023-09-26

这与问题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>

问题是，我只能扩展折叠的导航栏，而不能收缩它。

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

我已经尝试删除"data toggle"属性，它会使页面停止重新加载（并且栏停止扩展），所以这一定是导致这种行为的原因。

edit感谢您的帮助，我用angular ui解决了这个问题，正如charlieftl和l34p3r 建议的那样

在上面chartlietfl的评论中添加了更多细节，Bootstrap.js和Angular在这种情况下有些不一致。Angular邀请使用指令来处理带有JavaScript的接口组件。如果你想在Angular中使用Bootstrap，那么使用Angular ui Bootstrap最容易，它提供了Angular指令中包含的所有Bootstrap.js功能。使用ui引导程序肯定会减少单独应用bootstrap的JS功能所需的代码。

当使用按钮触发器来切换可折叠元素时，从标准bootstrap功能转换为ui引导程序会带来另一个好处。问题和答案中的HTML之间的差异可以用作比较ui引导程序集成前后代码外观的模型。具体来说，看看他们是如何交换data-toggle而使用ngClick来切换折叠状态的。

希望能有所帮助。

相关文章：