AngularJS Carousel 的最少代码答案

【问题标题】：Bare minimum code for AngularJS CarouselAngularJS Carousel 的最少代码
【发布时间】：2016-04-23 08:06:15
【问题描述】：

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

从 AngularJS Bootstrap 页面的the Carousel example 开始，有一些很棒的 HTML 和 JS sn-ps，但无法通过查看网站来判断，制作轮播需要哪些 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'，这会简化一些事情？谢谢。

【问题讨论】：

标签： angularjs angularjs-bootstrap

【解决方案1】：

您可以从最新的引导程序站点查看最低限度的引导程序轮播：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。

Carousel.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。

Demo Plnkr

【讨论】：

很好的例子！我在两条 ng-repeat 行中添加了ng-class="{'active': $index == 0}"，以消除指令内的 $timeout 调用。