Controller 'carousel', required by directive 'ngTransclude', can't be found

Question

Our team implemented a twitter bootstrap carousel for our front page. Everything's working fine for Chrome and Firefox. However when we tested it in IE 8, the carousel images were broken and the error thrown in the IE console was

Controller 'carousel', required by directive 'ngTransclude', can't be found

Here's the code (in haml) for our carousel:

%carousel.featuredTags{'ff-destroy-carousel' => 'true', 'interval' => "5000"}
%slide
  %img{:src => "#{$assetsPath}/img/pic-bora.png", :alt => ""}
    .dimmer
    .caption Boracay beach, Aklan
%slide
  %img{:src => "#{$assetsPath}/img/pic-bora.png", :alt => ""}
    .dimmer
    .caption Boracay beach, Aklan
%slide
  %img{:src => "#{$assetsPath}/img/pic-bora.png", :alt => ""}
    .dimmer
    .caption Boracay beach, Aklan
%slide
  %img{:src => "#{$assetsPath}/img/pic-bora.png", :alt => ""}
    .dimmer
    .caption Boracay beach, Aklan

Our first approach was to destroy the carousel (hence, the ff-destory-carousel directive) if the browser is IE 8 and utilized bowser.js for browser checking. But still the script error still pops up.

Any thoughts on why this kind of error is still happening in IE 8 and if their are possible workarounds for this?

Answer 1

Easy fix without disabling ui.bootstrap, just reinitialize carousel directive in your own .js file:

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

    }
}]);

You can read about this in my blog (russian).

Answer 2

I am having the same issue with the last angular-ui-bootstrap 3 branch. The Carousel directive is being called when you use class="carousel" and slide="".

It looks like a bug in angularjs 1.2 because it should only be compiled on Element or Attribute. I am not expert enough to look into $scompile

.directive('carousel', [function() {
  return {
    restrict: 'EA',
    transclude: true,
    replace: true,
    controller: 'CarouselController',
    require: 'carousel',
    templateUrl: 'template/carousel/carousel.html',
    scope: {
      interval: '=',
      noTransition: '=',
      noPause: '='
    }
  };
}])

.directive('slide', ['$parse', function($parse) {
  return {
    require: '^carousel',
    restrict: 'EA',
    transclude: true,
    replace: true,
    templateUrl: 'template/carousel/slide.html'

removing ui.bootstrap.carousel from the depencencies "solve" the issue (even though it shouldn't be the problem here)