2014-01-28 3 views
1

Я пытаюсь использовать карусель бутстрапа внутри углового компонента. Вот HTML:бутстрап карусель как угловой компонент?

<div id="carousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol ng-repeat="pic in ctrl.pics" class="carousel-indicators"> 
    <li data-target="#carousel" data-slide-to="{{ $index }}" ng-class="{ active: {{$first}} }"></li> 
    </ol> 
    <!-- Slides --> 
    <div ng-repeat="pic in ctrl.pics" class="carousel-inner"> 
    <div class="item" ng-class="{ active: {{$first}} }"> 
     <img src="{{ ctrl.pic.image }}"> 
     <div class="carousel-caption">{{ ctrl.pic.title }}</div> 
    </div> 
    </div> 
    <!-- Controls --> 
    <a id="carousel-control-left" class="left carousel-control" href="#carousel" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a id="carousel-control-right" class="right carousel-control" href="#carousel" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
</div> 

предыд/Следующие элементы управления не работают (возможно, и другие вещи тоже), вероятно, потому, что HREF атрибуты неверны. Я попытался исправить их, обновив hrefs во время выполнения, но я не знаю, как ввести url, указывающий на id, который находится внутри shadow dom.

В качестве альтернативы, я попытался добавить слушателей событий, которые использовали бы дротик: js для вызова функций карусели ('prev') и карусели ('next'). Этот подход тоже не удался, потому что я не знаю, как передать ссылку на тень dom root из дротика в javascript.

Любые предложения?

+0

У меня нет никаких проблем с CSS (applyAuthorStyles: True). Код javascript bootstrap, безусловно, пытается получить доступ к элементу в shadow dom: карусель! Я попытался передать ссылку shadowRoot из дротика в js, чтобы сделать getElementById в дереве теневого домика, получить доступ к карусели и вызвать ее функции (prev/next). – alearg

ответ

0

Там может быть два вопроса:

  • JavaScript пытается querySelect() элемента и не может найти его, потому что он скрыт в shadowDOM
    • вы можете изменить код JavaScript
  • CSS не работает, потому что вы не добавили applyAuthorStyles: true в свой компонент AngularDart.

компонента В настоящее время Углового UI Bootstrap в настоящее время портирована углового Dart
см https://github.com/akserg/angular.dart.ui
Carousel пока не работает AFAIK

Смежные вопросы