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
– Asim Zaidi, Commented Oct 13, 2014 at 3:00

ozkary · Accepted Answer · 2015-05-18 00:26:50Z

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, 2015 at 0:26

ozkary

2,7241 gold badge23 silver badges20 bronze badges

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

3 Comments

Yasitha Waduge Over a year ago

This answer looks promising, however, once non bindable added, functionality of left right arrows stops. Not sure why..

ozkary Over a year ago

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: w3schools.com/bootstrap/bootstrap_carousel.asp

Atul Sharma Over a year ago

Thanks a lot .. After 1 hour of struggle with code .. Landed up here ..and Whollla solved in just a sec

emi · Accepted Answer · 2015-04-08 17:55:57Z

24

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.

answered Apr 8, 2015 at 17:55

emi

3442 silver badges7 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:18:17Z

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, 2017 at 12:18

CommunityBot

11 silver badge

answered Oct 28, 2014 at 15:21

alexoviedo999

6,8192 gold badges28 silver badges17 bronze badges

1 Comment

mhulse Over a year ago

Other answers referring to the ng-non-bindable attribute didn't work for me. This did work. Thanks!

Robert · Accepted Answer · 2015-03-18 12:28:31Z

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, 2015 at 12:28

Robert

5,31843 gold badges70 silver badges115 bronze badges

answered Mar 18, 2015 at 12:09

Negrier Aurelien

331 silver badge6 bronze badges

1 Comment

Ramon Araujo Over a year ago

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 ;)

TLama · Accepted Answer · 2014-12-10 18:07:46Z

1

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

edited Dec 10, 2014 at 18:07

TLama

77k17 gold badges227 silver badges419 bronze badges

answered Dec 10, 2014 at 16:40

Malygin

191 bronze badge

Comments

AMP · Accepted Answer · 2016-02-08 19:53:13Z

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 8, 2016 at 19:53

AMP

911 silver badge3 bronze badges

1 Comment

elpiel Over a year ago

Thank you! I found the ng-non-bindable, but it was still not working correctly because of the href. Thank you!

Alexandru · Accepted Answer · 2017-10-17 08:26:50Z

0

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.

answered Oct 17, 2017 at 8:26

Alexandru

811 silver badge6 bronze badges

Collectives™ on Stack Overflow

using ui.bootstrap causing issues with carousel

7 Answers 7

3 Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related