带有自举轮播问题的角路由 [英] 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更改为未列出的任何内容时，它将默认为主视图.因此，当用户单击轮播并将轮播名称附加到网址后，它将默认为主视图.如果网址与该轮播相关，我需要某种方法来消除路由插入，是否有办法做到这一点，或者解决该问题的另一种方式?

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.

解决方案是不按原样使用bootstrap轮播，而是使用包装了bootstrap的angular库为您提供bootstrap功能的angular兼容指令

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/

此wrapper指令不使用锚点和URL更改来提供功能.我强烈建议您使用此库.

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

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