JS not working properly with AngularJS ng-view

Question

for an AngularJS SPA project I'm using ngRoute and also Bootstrap's Carousel template. However, I've encountered a problem where some functionality stopped working as soon as I used ng-view instead of just putting all of the main body in the main index.html file.

I have created the most bare-bones Plunker I could demonstrating the bug here.

Basically, there is a carousel containing 4 parts and the next/prev arrows do not work properly. However, I left at the bottom narrow indicators letting you move freely between the parts. They work properly. Also, the sequence continues as it should (i.e changes by itself) when left untouched.

Notice that if I swap carousel.html with the ng-view tag, it works fine.

I've just begun learning to use AngularJS and would really appreciate any help.

Instead of using bootstrap js library you need to replace it with angular ui bootstrap. Check it out here: angular-ui.github.io/bootstrap. — LXhelili
– LXhelili, Commented Jun 8, 2018 at 12:59
There is no bug, you are simply changing the route with href="#myCarousel", so it goes to /#/myCarousel. It doesn't have such route listed with .when, so it goes to .otherwise and you are always being redirected to /home. Simply use ui.bootstrap — Aleksey Solovey
– Aleksey Solovey, Commented Jun 8, 2018 at 13:03

Emanuele · Accepted Answer · 2018-06-08 13:21:02Z

1

If you want to continue using BootstrapJs inside AngularJS as an external library, you have to use the bootstrap methods for bootstrap carousel: .carousel('prev') and .carousel('next') then create relative $scope functions and link it to the prev and next button with ng-click.

This is your plunker edited.

But a best and cleaner solution would be to use ui-bootstrap library for AngularJS and Bootstrap. This is a fork for Bootstrap 4

edited Jun 8, 2018 at 13:21

answered Jun 8, 2018 at 13:14

Emanuele

8145 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

random_user_name Over a year ago

While this is correct follow the advise to use the angular ui bootstrap. Using the standard jQuery bootstrap is a recipe for headaches.

Emanuele Over a year ago

Sure. Use the angular ui bootstrap is the best solution. With the standard library you are doing a double job, which has already been done

Tom Dawn Over a year ago

Does this mean most of the useful components (getbootstrap.com/docs/4.1/components/alerts) are irrelevant?

random_user_name Over a year ago

@TomDawn - check out angular ui bootstrap. It's very full featured. And NO - that's a different thing - that's a simple CSS class - you an absolutely use that. We're referring to the javascript elements of bootstrap, not the CSS.

Emanuele Over a year ago

@TomDawn the angular ui bootstrap has all the bootstrap JavaScript Components translated in a more accurate angular way: directives. So you can have a better control about every bootstrap feature with all the benefits of angular framework.

Collectives™ on Stack Overflow

JS not working properly with AngularJS ng-view

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related