带有引导轮播问题的角度路由 [英] Angular routing with bootstrap carousel issue

问题描述

我目前有一个问题，我不确定如何解决，或者是否可以解决.我目前正在使用 Angular JS 和 Bootstrap 3.0.在我的 Angular 项目中，我正在使用路由，但在我的页面上，我有 3 个导航按钮，它们根据单击的导航按钮加载不同的指令(请注意，这不是使用路由，它根据什么来隐藏/取消隐藏指令)选中).在这三个指令中的每一个中，我都有一个引导轮播.我的问题是，当我单击以浏览轮播图像时，它会将我的轮播名称附加到 URL 并启动路由.在我的路由中，我有一个其他路由，如下所示:

I currently have an issue which im unsure of how to solve or if it even can be solved. I am currently using Angular JS and Bootstrap 3.0. Within my Angular project I am using routing but on my page I have 3 navigation buttons which load a different directive depending on the navigation button that was clicked (note that this is not using the routing, it hides/unhides a directive according to what was selected). In each of these three directives I have a bootstrap carousel. My issue is that when I click to navigate through the carousel images it appends the name of my carousel to the URL and the routing kicks in. In my routing I have an otherwise route as seen below:

  .otherwise({
         templateUrl: home.html'
   })

因此，当 url 更改为未列出的任何内容时，它将默认为主页视图.因此，当用户单击轮播并将轮播名称附加到 url 时，它默认为主页视图.如果 url 与此轮播相关，我需要某种方法来消除路由启动，有没有办法做到这一点，或者也许有其他方法可以解决这个问题?

so when the url changes to anything other than is listed it will default to the home view. Hence when a user clicks on the carousel and the carousel name is appended to the url it then defaults to the home view. I need some sort of way to eliminate the routing from kicking in if the url is related to this carousel, is there a way to do this or perhaps another way around this issue?

我希望我已经足够清楚地解释了自己.如果不让我知道，我会尽量解释得更好.

I hope I have explained myself clearly enough. If not let me know and I will try to explain better.

感谢您的帮助.

推荐答案

如果我理解正确，问题似乎是轮播修改了 URL 并触发了路由更改.

If I understand correctly, the issue seems to be that the carousel modifies the URL and that triggers a route change for you.

对此的解决方案是不按原样使用引导程序轮播，而是使用包装引导程序的角度库为您提供引导程序功能的角度兼容指令

The solution to this is to NOT use the bootstrap carousel as is, but instead use the angular library that wraps bootstrap to provide you angular compatible directive for bootstrap functionality

http://angular-ui.github.io/bootstrap/

此包装器指令不使用锚点和 URL 更改来提供功能.我强烈建议使用这个库.

This wrapper directive does not use the anchor and URL changes to provide the functionality. I'd strongly recommend using this library.

这篇关于带有引导轮播问题的角度路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！