bootstrap carousel as an angular.dart component?

Question

I am trying to use bootstrap's carousel inside an angular.dart component. Here is the 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>

The prev/next controls don't work (maybe other things too), probably because the href attributes are wrong. I tried to fix them by updating the hrefs at run time, but I don't know how to enter a url pointing to an id that is inside shadow dom.

Alternatively, I tried to add event listeners that would use dart:js to call the carousel('prev') and carousel('next') bootstrap functions. This approach failed too because I don't know how to pass the shadow dom root reference from dart to javascript.

Any suggestions?

I have no problem with CSS (applyAuthorStyles: true). The javascript bootstrap code most certainly attempts to access an element in shadow dom: the carousel! I attempted to pass a reference to shadowRoot from dart to js in order to do a getElementById in the shadow dom's tree, gain access to the carousel and invoke its functions (prev/next). — alearg

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-01-28T13:42:13

There may be two issues:

JavaScript tries to querySelect() an element and can't find it because it's hidden in the shadowDOM
- you could change the JavaScript code
The CSS doesn't work because you haven't added applyAuthorStyles: true to your AngularDart component.

Currently Angular UI Bootstrap components are being ported to Angular Dart
see https://github.com/akserg/angular.dart.ui
Carousel is not yet working AFAIK

bootstrap carousel as an angular.dart component?

1 Answers