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 imag

Answer 1

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)

Answer 2

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