3

我花了一整天的时间试图让“示例”AngularJS Carousel 工作，这要归功于最终偶然发现了这个话题，我终于让它工作了。

从AngularJS Bootstrap 页面中的 Carousel 示例开始，有一些很棒的 HTML 和 JS 片段，但是通过查看站点无法判断，需要哪些 JS 和 CSS 文件以及需要多少 JS 和 CSS 文件才能使轮播工作。我已经尽一切努力让它工作，我最终得到了各种无关的（我认为？）JS和CSS文件。

甚至他们对angular.module('ui.bootstrap.demo').controller...我的概念也感到困惑，因为在我尝试之前我无法让应用程序工作 angular.module('myApp', ['ui.bootstrap', 'ui.bootstrap.tpls', 'ngAnimate', 'ngTouch'])——即使这样我也不确定需要多少这些模块。

有人可以列出使 Carousel 正常运行所需的最少 JS 和 CSS 文件，并简要说明原因吗？是否有一些'ui.bootstrap.demo'我错过的定义，这会简化一些事情？谢谢。

4

1 回答 1

6

您可以从最新的引导站点查看最低限度的引导轮播：http: //getbootstrap.com/javascript/#carousel

下一步是把它变成一个最小的 AngularJS 指令，事实证明这真的很简单。

链接

由于 Bootstrap 的轮播组件需要 jQuery，因此您需要最新版本的 jQuery：https ://code.jquery.com/jquery-2.1.4.js 。

还从 Bootstrap 添加必要的链接：http: //getbootstrap.com/getting-started/#download

轮播指令

app.directive('carousel', function($timeout) {
   return {
      restrict: 'E',
      scope: {
        links: '=' 
      },
      templateUrl: 'carousel.html',
      link: function(scope, element) {
        $timeout(function() {
          $('.carousel-indicators li',element).first().addClass('active');
          $('.carousel-inner .item',element).first().addClass('active');
        });
      }
   }
});

根据 Bootstrap 的文档：

需要初始活动元素

.active 类需要添加到其中一张幻灯片中。否则，轮播将不可见。

为了在渲染后添加 .active 类，我们$timeout在链接函数中使用。

轮播.html

这基本上是 Bootstrap 提供的 HTML 的副本，它已被修改ngRepeat并ngSrc使其动态化：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li ng-repeat="link in links" data-target="#carousel-example-generic" data-slide-to="{{$index}}"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item" ng-repeat="link in links">
      <img ng-src="{{link.src}}" alt="{{link.src}}">
      <div class="carousel-caption">
       {{link.caption}}
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

用法

要使用该指令，请在控制器中初始化链接列表：

app.controller('ctrl', function($scope) {
   $scope.links =[
     { src:"http://www.conceptcarz.com/images/Suzuki/suzuki-concept-kizashi-3-2008-01-800.jpg", alt:"", caption:""},
     { src:"http://www.conceptcarz.com/images/Volvo/2009_Volvo_S60_Concept-Image-01-800.jpg", alt:"", caption:""},
     { src:"http://www.sleepzone.ie/uploads/images/PanelImages800x400/TheBurren/General/sleepzone_hostels_burren_800x400_14.jpg", alt:"", caption:""},
  ];
});

将指令添加到您的视图并传入您之前在控制器中定义的链接模型：

<body ng-controller="ctrl">
  <div style="width:800px; height: 400px">
    <carousel links="links"></carousel>
  </div>
</body>

注意：内联样式是确保图像大小占据整个画布所必需的。可能有更好的方法来做到这一点 - 请参阅 Bootstrap。

演示计划

于 2016-01-18T10:19:53.283 回答