AngularJS Carousel的最小代码

Question

AngularJS Carousel的最小代码

pau*_*nas 2 angularjs angularjs-bootstrap

我花了一整天时间试图让"示例"AngularJS Carousel工作,而这只是归功于最终磕磕绊绊的这个话题,我终于得到了它的工作.

从AngularJS Bootstrap页面中的Carousel示例开始,有一些很棒的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

pix*_*its 6

您可以从最新的bootstrap站点查看最低限度的bootstrap轮播: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');
        });
      }
   }
});

Run Code Online (Sandbox Code Playgroud)

根据Bootstrap的文档:

需要初始活动元素

.active类需要添加到其中一个幻灯片中.否则,旋转木马将不可见.

为了在渲染后添加.active类,我们$timeout在link函数中使用.

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>

Run Code Online (Sandbox Code Playgroud)

用法

要使用该指令,请初始化控制器中的链接列表:

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:""},
  ];
});

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

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

演示Plnkr

归档时间：	10 年前
查看次数：	19528 次
最近记录：	8 年，6 月前