当与angular配对时,引导数据切换重新加载页面
Bootstrap data-toggle reloads page when paired with angular
这与问题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
来切换折叠状态的。
希望能有所帮助。
相关文章:
- 创建新数据和加载现有数据需要单独的视图吗
- 钛 - HTTPClient:打开新的控制器加载
- 保持 JavaScript 在浏览器控制台中运行,即使在新的页面加载之后也是如此
- 路由到新页面时加载不起作用
- 如何在新窗口完成加载后执行某些内容
- 使用新标题重新加载 html 页面
- Primefaces在打开新页面时加载数据消息
- Wordpress音频播放器和平滑状态.在新页面重新加载播放器时调用什么回调函数
- 用新数据重新加载renderer3d
- 文本不被渲染后,新的页面加载- JQuery移动
- 需要在新标签中加载pdf/doc文件,而不是下载,只是想在浏览器中阅读
- 用新参数重新加载页面
- Js和CSS不检测新页面何时加载
- 在新页面上加载一个flash视频,它在上一页上的位置
- 在新窗口中加载代码编写器视图
- 在控制台中使用新脚本重新加载页面
- 如何在加载新页面后加载AJAX数据
- 如何使用jQuery在新窗口中加载页面,然后关闭它们
- Jquery没有看到新的HTML加载到对话框中
- 无法用新值重新加载JGrid