Il controller 'carousel', richiesto dalla direttiva 'ngTransclude', non può essere trovato

Question

Il nostro team ha implementato un carosello di bootstrap su twitter per la nostra prima pagina. Tutto funziona perfettamente per Chrome e Firefox. Tuttavia quando abbiamo testato in IE 8, le immagini giostra erano rotti e l'errore gettato nella console IE era

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

Ecco il codice (in Haml) per il nostro carosello:

%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 

Il nostro primo l'approccio era quello di distruggere il carosello (da qui la direttiva ff-destory-carousel) se il browser è IE 8 e utilizzato bowser.js per il controllo del browser. Ma ancora l'errore di script si apre ancora.

Qualche idea sul perché questo tipo di errore si verifica ancora in IE 8 e se sono possibili soluzioni alternative per questo?

Answer 1

Ho lo stesso problema con l'ultimo ramo angular-ui-bootstrap 3. La direttiva Carousel viene chiamata quando si utilizza class="carousel" e slide="".

Sembra un bug in angularjs 1.2 perché dovrebbe essere compilato solo su Elemento o Attributo. Io non sono esperto abbastanza per guardare in $ 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' 

rimozione ui.bootstrap.carousel dalle depencencies "risolvere" il problema (anche se non dovrebbe essere il problema qui)

Answer 2

Easy Fix senza disattivare ui.bootstrap, basta reinizializzare direttiva carosello nel tuo file .js:

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

    } 
}]); 

Si può leggere su questo in my blog (russo).