Angularjs 使用引导和angularUi在模式窗口中旋转

我试图创建一个图像库使用角度用户界面和引导。图像库有4x4行照片，我希望用户在点击照片时能够在模式窗口中打开照片。模态窗口应以carousal的形式显示照片，以便他可以通过“下一步”和“上一步”查看整个图像库

下面是我的代码。模式窗口将打开，但不包含旋转木马

HTML代码

控制器

controller（'ListingDetailsCtrl'，function ListingDetailsCtrl（$scope，$modal，$stateparms，ListingService，CategoryService）{
$scope.id=$stateParams.id；
$scope.selectedListing=ListingService.find（$scope.id）；
$scope.category=CategoryService.findByCode（$scope.selectedListing.category）；
//打开图像的模式窗口
$scope.openModal=函数（）{
var modalInstance=$modal.open({
动画：没错，
尺寸：“lg”，
模板：“{image}}”，
决心：{
项目：功能（）{
返回$scope.selectedListing.images；
}
}
});
};

---

如果你能找出这里的错误，请帮助我。

而不是重新发明轮子（尽管有时这可能是一次很好的学习经验）我建议您使用现有的angular模块。我最近在一个项目中使用了这个模块，它包含了您正在寻找的所有功能：。基本示例将帮助您启动并运行所需的功能

<ul ng-controller="GalleryCtrl">
    <li ng-repeat="image in images">
        <a ng-click="openLightboxModal($index)">
           <img ng-src="{{image.thumbUrl}}" class="img-thumbnail">
        </a>
    </li>
</ul>

angular.module('app').controller('GalleryCtrl', function ($scope, Lightbox) {
  $scope.images = [
    {
      'url': '1.jpg',
      'caption': 'Optional caption',
      'thumbUrl': 'thumb1.jpg' // used only for this example
    },
    {
      'url': '2.gif',
      'thumbUrl': 'thumb2.jpg'
    },
    {
      'url': '3.png',
      'thumbUrl': 'thumb3.png'
    }
  ];

  $scope.openLightboxModal = function (index) {
    Lightbox.openModal($scope.images, index);
  };
});

角度.module（'app'）.controller（'GalleryCtrl'，function（$scope，Lightbox）{
$scope.images=[
{
'url'：'1.jpg'，
“标题”：“可选标题”，
'thumbUrl'：'thumb1.jpg'//仅用于此示例
},
{
“url”：“2.gif”，
'thumbUrl'：'thumb2.jpg'
},
{
'url'：'3.png'，
“thumbUrl”：“thumb3.png”
}
];
$scope.openLightboxModal=函数（索引）{
openModal（$scope.images，index）；
};
});

这里有一个演示（它基于我以前的一个演示，因此它有一个稍微不同的模板，并添加了一些CSS以使其美观，但它与下面描述的代码相同）：

我会重构您的控制器，这样您就不必为您的modalInstance使用单独的控制器。这将使它更容易：

controller( 'ListingDetailsCtrl', function ListingDetailsCtrl($scope, $modal, $stateParams,ListingService,CategoryService) {
  $scope.id= $stateParams.id;
  $scope.selectedListing = ListingService.find($scope.id);
  $scope.category= CategoryService.findByCode($scope.selectedListing.category);
  $scope.openModal = function(indx) {
    //This will let you open the carousel to the image that was clicked
    $scope.selectedListing.images[indx].active=true;

    $scope.modalInstance= $modal.open({
      animation: true,
      size:"lg",
      //To set the active slide when loading the carousel, just add
      //active = "image.active" to the slide element. Also, we're using 
      //the current scope, so change your slide repeat to "image in
      //selectedListing.images" 
      template: '<div class="modal-body"><carousel><slide ng-repeat="image in selectedListing.images" active="image.active">{{image}}<img style="margin:auto;" ng-src="assets/images/{{image}}"></slide></carousel></div>',
    });
  };
  $scope.ok = function () {
    $scope.modalInstance.close();
  };
});

controller（'ListingDetailsCtrl'，function ListingDetailsCtrl（$scope，$modal，$stateparms，ListingService，CategoryService）{
$scope.id=$stateParams.id；
$scope.selectedListing=ListingService.find（$scope.id）；
$scope.category=CategoryService.findByCode（$scope.selectedListing.category）；
$scope.openModal=函数（indx）{
//这将允许您打开已单击图像的旋转木马
$scope.selectedListing.images[indx].active=true；
$scope.modalInstance=$modal.open({
动画：没错，
尺寸：“lg”，
//要在加载转盘时设置活动幻灯片，只需添加
//active=“image.active”添加到幻灯片元素。此外，我们正在使用
//当前范围，因此将幻灯片重复更改为“图像输入”
//selectedListing.images“
模板：“{image}}”，
});
};
$scope.ok=函数（）{
$scope.modalInstance.close（）；
};
});

然后，您只需要对HTML视图进行一次更改，以便将图像的索引传递给OpenModel fn：

<div id="listing-detail-gallery" class="container">
  <ul class="row">
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ng-repeat="image in selectedListing.images">
      <img class="img-responsive" ng-click="openModal($index)" src="assets/images/{{image}}"/>
    </li>
  </ul>
</div>

---

另外，您会注意到我将旋转木马指示器隐藏在旋转木马中。ui bootstrap 0.13.0中有一个非常难看的未解决问题，如果您有很多幻灯片，它会导致指示器顺序错误。如果您想使用指示器，有两个简单的选项可以解决此问题。一个是修改carousel.html模板并删除

orderBy:“index”

来自指示器。或者，有两个使用0.12.x版本，直到修复为止。（我选择前者）。

这对你有用吗？还是你决定集成灯箱插件？我决定使用你的解决方案。除了“active”之外，它工作得很好部分。有时carousal不显示所选的图像。当我关闭carousal并第二次选择图像时，它工作了。嗯，不知道是什么原因造成的。有错误吗？没有错误。事实上，设置了活动标志，图像src是正确的。查看i@jme11。我使用了该plunker。我发现了一个问题，即n我单击第一个图像，然后逐个移动滑块以查看其他图像，然后关闭滑块，然后再次单击第一个图像，我在滑块上获得了最后打开的图像。索引传递正确，但根据索引图像未显示。请帮我整理。请帮帮忙。谢谢。我发现了一件与class保存在最后一个图像分区中，这就是为什么当我单击任何以前的图像时，它会显示先前打开的最后一个图像。请帮我整理。谢谢。

controller( 'ListingDetailsCtrl', function ListingDetailsCtrl($scope, $modal, $stateParams,ListingService,CategoryService) {
  $scope.id= $stateParams.id;
  $scope.selectedListing = ListingService.find($scope.id);
  $scope.category= CategoryService.findByCode($scope.selectedListing.category);
  $scope.openModal = function(indx) {
    //This will let you open the carousel to the image that was clicked
    $scope.selectedListing.images[indx].active=true;

    $scope.modalInstance= $modal.open({
      animation: true,
      size:"lg",
      //To set the active slide when loading the carousel, just add
      //active = "image.active" to the slide element. Also, we're using 
      //the current scope, so change your slide repeat to "image in
      //selectedListing.images" 
      template: '<div class="modal-body"><carousel><slide ng-repeat="image in selectedListing.images" active="image.active">{{image}}<img style="margin:auto;" ng-src="assets/images/{{image}}"></slide></carousel></div>',
    });
  };
  $scope.ok = function () {
    $scope.modalInstance.close();
  };
});

<div id="listing-detail-gallery" class="container">
  <ul class="row">
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ng-repeat="image in selectedListing.images">
      <img class="img-responsive" ng-click="openModal($index)" src="assets/images/{{image}}"/>
    </li>
  </ul>
</div>