Question

我是bootstrap和AngularJs的新手。我正在为我当前的应用程序使用bootstrap和Angular Js。当我在索引页面内直接使用bootstrap carousel时，旋转木马的滑动链接工作绝对完美。但是当我使用ng-view通过部分文件加载轮播标记时，幻灯片链接无法正常工作。它只能工作一次，然后下次不能工作。哪里出错了我粘贴下面的代码：

<div class="corousal-container">
  <div class="col-md-12">
    <ul id="tabs" class="ops-tabs">
      <li class="col-md-4 ops-list active">
        <a href="#" class="ops-block">
          <span class="header">Charts</span>
        </a>
      </li>
      <li class="col-md-4 ops-list">
        <a href="#" class="ops-block">
          <span class="header">Graphs</span>
        </a>
      </li>
      <li class="col-md-4 ops-list">
        <a href="#" class="ops-block">
          <span class="header">Reports</span>
        </a>
      </li>
    </ul>  
  </div>
</div>
<div class="col-md-12">
  <div data-ride="carousel" class="carousel slide" id="execView">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-slide-to="0" data-target="#execView" class="active"></li>
      <li data-slide-to="1" data-target="#execView" class=""></li>
      <li data-slide-to="2" data-target="#execView" class=""></li>
    </ol>
    <div class="carousel-inner">
      <div class="item">
        <div class="container" id="pie-chart1">
        </div>
      </div>
      <div class="item">
        <div class="container" id="pie-chart2">
        </div>
      </div>
      <div class="item active">
        <div class="container" id="pie-chart3">
          <div class="carousel-caption">
            <canvas class="canvas" id="canvas" style="width: 400px; height: 400px;" width="600" height="600"></canvas>
          </div>
        </div>
      </div>
    </div>
    <a data-slide="prev" href="#execView" class="left carousel-control"><span class="fa fa-angle-left"></span></a>
    <a data-slide="next" href="#execView" class="right carousel-control"><span class="fa fa-angle-right"></span></a>
  </div>
</div>

Answer 1

如果您正在使用ng-view，则需要在加载html后创建引导程序carousel。您可以使用onload方法执行此操作。

<div ng-view onload="viewLoaded()"></div>


$scope.viewLoaded=function(){
 $('.carousel ').carousel()
}

Answer 2

使用angular Bootstrap指令。

http://angular-ui.github.io/bootstrap/

bootstrap carousel使用部分文件无法正常工作

2 个答案: