Angular routing with bootstrap carousel issue

Question

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'
   })

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.

Thanks for any help I may get.

Answer 1

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/

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