1

我正在尝试在 angular.dart 组件中使用引导程序的轮播。这是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>

prev/next 控件不起作用（可能还有其他问题），可能是因为 href 属性错误。我试图通过在运行时更新 href 来修复它们，但我不知道如何输入指向 shadow dom 内部 id 的 url。

或者，我尝试添加将使用 dart:js 调用 carousel('prev') 和 carousel('next') 引导函数的事件侦听器。这种方法也失败了，因为我不知道如何将影子 dom 根引用从 dart 传递到 javascript。

有什么建议么？

4

1 回答 1

0

可能有两个问题：

  • JavaScript 试图找到querySelect()一个元素但找不到它，因为它隐藏在 shadowDOM 中
    • 您可以更改 JavaScript 代码
  • CSS 不起作用，因为您尚未添加applyAuthorStyles: true到 AngularDart 组件中。

目前，Angular UI Bootstrap 组件正在移植到 Angular Dart，
请参阅https://github.com/akserg/angular.dart.ui
Carousel 尚未工作 AFAIK

于 2014-01-28T13:42:13.950 回答