簡體   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