Question

我正在试图弄清楚如何将幻灯片号码传递到ui.bootstrap轮播中。在下面的Plunker中，我有两个按钮 - 一个只打开一个包含幻灯片旋转木马的模态。另一个做同样的事情（打开幻灯片3），但传递幻灯片编号以显示在模态轮播中。

单击“打开幻灯片3”时，我无法确定如何使用旋转木马中打开功能的幻灯片编号显示所选的幻灯片编号。

我该如何实现？

我的代码：

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
  <div ng-controller="ItemsCtrl">
    <div ng-controller="ModalDemoCtrl">
      <button class="btn btn-default" ng-click="open()">Open me!</button>
      <button class="btn btn-default" ng-click="open(2)">Open to slide 3!</button>
    </div>
  </div>
  </body>
</html>

http://plnkr.co/edit/jV3fc2u0ud45BRRNymwp

Answer 1

在你的ModalInstanceCtrl函数中，将它添加到你的代码中：

    var ModalInstanceCtrl = function ($scope, $modalInstance, items, modalName, slideTo) {

     $scope.items = items;
     $scope.modalName = modalName;
     $scope.slideTo = slideTo;

     // this is what tell the carousel wich item should be active.
     if(slideTo){
       items[slideTo].active=true;
     }
...

Angular ui.bootstrap - 将幻灯片编号传递到轮播中

1 个答案: