繁体   English   中英

引导轮播作为angular.dart组件?

[英]bootstrap carousel as an angular.dart component?

我正在尝试在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来修复它们,但是我不知道如何输入指向影子dom内部ID的网址。

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

有什么建议么?

可能有两个问题:

  • JavaScript尝试对元素进行querySelect()找不到,因为它隐藏在shadowDOM中
    • 您可以更改JavaScript代码
  • CSS无效,因为您尚未向AngularDart组件添加applyAuthorStyles: true

当前,Angular UI Bootstrap组件正在移植到Angular Dart
参见https://github.com/akserg/angular.dart.ui
Carousel尚无法使用AFAIK

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM