Question

我花了一整天的时间来试图获得＆＃34;示例＆＃34; AngularJS Carousel工作，只是感谢最终绊倒this topic，我终于得到了它的工作。

从AngularJS Bootstrap页面的the Carousel example开始，有一些很棒的HTML和JS片段，但通过查看网站无法判断，需要多少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'，这会简化一些事情？感谢。

Answer 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

AngularJS Carousel的最小代码

1 个答案:

链接

轮播指令

Carousel.html

用法