无法使用Angular路由的Bootstrap折叠功能

时间:2014-11-05 23:36:20

标签: javascript jquery css angularjs twitter-bootstrap

UPDATE#2:我已经实现了一个按钮和UI Bootstrap并且菜单功能没有Angular Routing接管,但是,在选择菜单项后我无法让菜单崩溃和重新安排。

UPDATE:根据建议,我已将上述监听器更新为此(不起作用):

$('a:not([data-toggle="collapse"])').click(function (e) {
    var url = $(e.currentTarget).attr('href') || '#';
    if (!(url.charAt(0) == '#')) {
        window.location.href = url;
    }
});

这个应用程序的所有Angular代码似乎都在js / compiled.min.js中 - 如果出现问题,肯定会从这里开始,对吧?

我继承了之前开发人员的一些工作,这些工作有一些时髦的代码,这让我有点头疼。如果您在Chrome中访问http://www.executionists.com/#/并将视口更改为移动设备,则会看到该菜单无法正常工作,因为它位于较大的视口中。

当您单击菜单按钮时,Angular会尝试路由页面,这当然会导致404.我不能为我的生活弄清楚它为什么要尝试路由以及如何防止它。我尝试过的事情。

以此处列出的方式使用UI Bootstrap(在“折叠”部分下):http://angular-ui.github.io/bootstrap/

需要注意的一点是,我必须使用以下修复程序来修复另一个角度路由不允许浏览器历史记录运行的错误。我发现了一个常见的问题。当我把修复程序放在适当位置,路由和历史记录功能按照整个站点的需要运行时,我怀疑这是我的移动友好的可折叠菜单错误的原因。修复:

// This is required for links to work properly with the browser history
$('[ng-app]').on('click', 'a', function() {
    window.location.href = $(this).attr('href');
});

我不知道该怎么做,甚至不知道如何最好地诊断这个问题。

1 个答案:

答案 0 :(得分:0)

您正在定位与该侦听器的所有链接,可能更具体:

$('a:not([data-toggle="collapse"])').click(function (e) {
    var url = $(e.currentTarget).attr('href') || '#';
    if (!(url.charAt(0) == '#')) {
        window.location.href = url;
    }
});