Bootstrap carousel working but still shows [$compile:ctreq] in the console

Question

I want to use bootstrap carousel in my angularjs website. The carousel works fine. But I get lots of errors in the console. If the remove the markup from the carousel, the errors doesn't show.

Carousel HTML

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="item" ng-repeat="image in images" ng-class="{'active': $index==0}">
        <div class="container" style="width:100%;background:url('{{image.coverImage}}') no-repeat;min-height:350px;background-size:cover;background-position: center;">
        </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Error in the console

Error: [$compile:ctreq] http://errors.angularjs.org/1.2.28/$compile/ctreq?p0=carousel&p1=slide at Error (native) at http://localhost:3000/lib/angular/angular.min.js:6:450 at t (http://localhost:3000/lib/angular/angular.min.js:51:369) at J (http://localhost:3000/lib/angular/angular.min.js:54:409) at http://localhost:3000/lib/angular/angular.min.js:61:96 at http://localhost:3000/lib/angular/angular.min.js:72:199 at l.promise.then.J (http://localhost:3000/lib/angular/angular.min.js:101:96) at l.promise.then.J (http://localhost:3000/lib/angular/angular.min.js:101:96) at http://localhost:3000/lib/angular/angular.min.js:102:259 at h.a.$get.h.$eval (http://localhost:3000/lib/angular/angular.min.js:113:32)

What does this mean? Will this cause any issue with the functionality of the website?

I think this will help http://stackoverflow.com/questions/26332202/using-ui-bootstrap-causing-issues-with-carousel — Ronnie, Sep 28 '15 at 16:15
eh, I won't be a point monger and copy paste that answer. I simply went to the error page in angular docs: http://errors.angularjs.org/1.2.28/$compile/ctreq?p0=carousel&p1=slide and then searched for that error. — Ronnie, Sep 28 '15 at 16:38

score 0 · Answer 1 · answered Oct 17 '17 at 07:56

When building with angular forget bootstrap's javascript.Use only the css.Especially when using ngRoute.It reads the hashes from url.For carousels, use ui.bootstrap.carousel, read the doc and see the example shown on the page.It's simple and concise.Otherwise there will always be an error in the console, that is if the carousel works.This is the official page Hope this helps.

Bootstrap carousel working but still shows [$compile:ctreq] in the console

1 Answers1