using ui.bootstrap causing issues with carousel

Question

I am having issues with getting the carousel working properly. I used yeomen to scaffold the angular app. I am getting this error

Error: [$compile:ctreq] Controller 'carousel', required by directive 'slide', can't be found!
http://errors.angularjs.org/1.2.26/$compile/ctreq?p0=carousel&p1=slide
    at http://localhost:9000/bower_components/angular/angular.js:78:12
    at getControllers (http://localhost:9000/bower_components/angular/angular.js:6543:19)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6712:35)
    at http://localhost:9000/bower_components/angular/angular.js:6913:13
    at http://localhost:9000/bower_components/angular/angular.js:8113:11
    at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)
    at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)
    at http://localhost:9000/bower_components/angular/angular.js:11659:26
    at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12702:28)
    at Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:12514:31) <div ng-class="{
    'active': leaving || (active &amp;&amp; !entering),
    'prev': (next || active) &amp;&amp; direction=='prev',
    'next': (next || active) &amp;&amp; direction=='next',
    'right': direction=='prev',
    'left': direction=='next'
  }" class="left carousel-control item text-center ng-isolate-scope" ng-transclude="" href="#Carousel" data-slide="prev"> angular.js:10072
Error: [$compile:ctreq] Controller 'carousel', required by directive 'slide', can't be found!
http://errors.angularjs.org/1.2.26/$compile/ctreq?p0=carousel&p1=slide
    at http://localhost:9000/bower_components/angular/angular.js:78:12
    at getControllers (http://localhost:9000/bower_components/angular/angular.js:6543:19)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6712:35)
    at http://localhost:9000/bower_components/angular/angular.js:6913:13
    at http://localhost:9000/bower_components/angular/angular.js:8113:11
    at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)
    at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)
    at http://localhost:9000/bower_components/angular/angular.js:11659:26
    at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12702:28)
    at Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:12514:31) <div ng-class="{
    'active': leaving || (active &amp;&amp; !entering),
    'prev': (next || active) &amp;&amp; direction=='prev',
    'next': (next || active) &amp;&amp; direction=='next',
    'right': direction=='prev',
    'left': direction=='next'
  }" class="right carousel-control item text-center ng-isolate-scope" ng-transclude="" href="#Carousel" data-slide="next"> angular.js:10072

here is my html file

 <style>
            #slides_control > div{
                height: 200px;
            }
            img{
                margin:auto;
                width: 400px;
            }
            #slides_control {
                position:absolute;
                width: 400px;
                left:50%;
                top:20px;
                margin-left:-200px;
            }
            .carousel-control.right {
                background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(237, 232, 232, 0.5) 100%) !important;
            }
            .carousel-control.left {
                background-image: linear-gradient(to right, rgba(249, 248, 248, 0.5) 0%, rgba(0, 0, 0, .0001) 100%) !important;
            }
        </style>
<div id="Carousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="Carousel" data-slide-to="0" class="active"></li>
        <li data-target="Carousel" data-slide-to="1"></li>
        <li data-target="Carousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/sliders/main_page_slider/PhoneApp_Website_Home_41.png" class="img-responsive">
        </div>
        <div class="item">
            <img src="images/sliders/main_page_slider/PhoneApp_Website_Home_45.png" class="img-responsive">
        </div>
        <div class="item">
            <img src="images/sliders/main_page_slider/PhoneApp_Website_Home_49.png" class="img-responsive">
        </div>
    </div>
    <a class="left carousel-control" href="#Carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#Carousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

my controller is

'use strict';

angular.module('myhApp') .controller('MainCtrl', function ($scope) { });

here is my app.js

angular
  .module('myhApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.bootstrap'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

I am not sure whats causing it. Any help will be appreciated.

** Some findings recently **

ok I did some digging around and found out that I have to have carousel in the dom for directive (as the error indicates). When I add carousel, the error goes away but my carousel doesnt work anymore and looks wonky as well.

Here is the change that I made to html

<div id="Carousel" class="carousel slide" carousel>

here is how it looks and you can see there is an extra arrow in the cats face. I am not sure whats going..any help will be apprecitaed

enter image description here

I think it has to do something with ui.bootstrap.transition. not sure — Asim Zaidi, Oct 13 '14 at 03:00

score 37 · Answer 1 · answered May 18 '15 at 00:26

37

I was able to solve the conflict by adding the ng-non-bindable to the elements that have the data-slide directive. see below:

  <a data-slide="prev" href="#clients-slider" ng-non-bindable class="left carousel-control">‹</a>

answered May 18 '15 at 00:26

ozkary

2,436
1
21
20

This answer looks promising, however, once non bindable added, functionality of left right arrows stops. Not sure why.. – Yasitha Waduge Feb 05 '16 at 04:33
since the ng-non-bindable directive removes the ui-bootstrap conflict, the problem can be with how the bootstrap carousel is defined on your page. follow this link for a simple example: http://www.w3schools.com/bootstrap/bootstrap_carousel.asp – ozkary Feb 06 '16 at 16:05
Thanks a lot .. After 1 hour of struggle with code .. Landed up here ..and Whollla solved in just a sec – Atul Sharma Jun 06 '16 at 07:16

score 24 · Answer 2 · answered Apr 08 '15 at 17:55

data-slide is used by both Bootstrap and ui.bootstrap so there is a conflict here. If you want to use the plain Bootstrap carousel method you can tell angular to ignore a DOM element and it's children.

To do that insert ngNonBindable into the appropriate Dom element.

score 2 · Answer 3 · edited May 23 '17 at 12:18

2

As per gooseman's answer on SO:

angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
.controller('CarouselController', ['$scope', '$timeout', '$transition', '$q', function ($scope, $timeout, $transition, $q) {
}]).directive('carousel', [function() { 
    return { }
}]);

edited May 23 '17 at 12:18

Community

1
1

answered Oct 28 '14 at 15:21

alexoviedo999

6,761
1
26
17

1

Other answers referring to the `ng-non-bindable` attribute didn't work for me. This did work. Thanks! – mhulse Jun 24 '15 at 23:53

score 2 · Answer 4 · edited Mar 18 '15 at 12:28

2

I have the same problem and I don't know why but if you delete in your HTML data-slide="prev" and data-slide="next" the error disappears.

edited Mar 18 '15 at 12:28

Robert

5,278
43
65
115

answered Mar 18 '15 at 12:09

Negrier Aurelien

33
1
6

1

The explanation comes from Melvin Gruesbeck answer. There is a conflict if you use both Bootstrap and Angular-UI-Bootstrap. It can be solved using @ozkary example, instead of surrendering to remove the data-slide attributes ;) – Ramon Araujo May 21 '15 at 23:35

score 1 · Answer 5 · edited Dec 10 '14 at 18:07

1

Just remove ui.bootstrap from the list of modules if you don't need it.

edited Dec 10 '14 at 18:07

TLama

75,147
17
214
392

answered Dec 10 '14 at 16:40

Malygin

19
1

score 1 · Answer 6 · answered Feb 08 '16 at 19:53

1

Add ng-non-bindable and change href for data-target

<a class="left carousel-control" data-target="#myCarousel" role="button" data-slide="prev" ng-non-bindable><</a>
<a class="right carousel-control" data-target="#myCarousel" role="button" data-slide="next" ng-non-bindable>></a>

answered Feb 08 '16 at 19:53

AMP

91
1
3

Thank you! I found the `ng-non-bindable`, but it was still not working correctly because of the `href`. Thank you! – elpiel Aug 30 '18 at 10:03

score 0 · Answer 7 · answered Oct 17 '17 at 08:26

When building with angular forget bootstrap's javascript.Use only the css.Especially when using ngRoute.It reads the hashes from url amongst other things.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.

using ui.bootstrap causing issues with carousel

7 Answers7

Linked