Question

我有一个用例，其中从一组对象填充Angular UI Bootstrap Carousel。轮播中的每张幻灯片都填充了子类别。当用户单击某个类别的链接时，轮播将转换到新幻灯片。每张幻灯片都包含子类别数据。

我遇到的问题是，当用户点击一个类别链接，然后在幻灯片转换时点击另一个时，两个幻灯片的内容将连接在一起。我想阻止这种行为。

我怀疑是在每张幻灯片中使用的ngAnimate和ng-repeat属性。您对如何解决此问题表示赞赏。

Plunker：

我创建了一个plunker。要重新创建问题，请单击按钮＆＃34;显示幻灯片2＆＃34;开始从幻灯片1到幻灯片2的过渡。然后快速单击＆＃34;显示幻灯片3＆＃34;查看内容如何合并到一张幻灯片中。

使用Javascript：

'use strict';

var app = angular.module('app', ['ngAnimate', 'ui.bootstrap']);

app.controller('MainCtrl', ['$scope', 'dataService', function ($scope, dataService) {

var data = dataService.getCategories();

//Setup carousel slides.
$scope.index = 0;
$scope.slides = [];
$scope.slides.push(data[0]);
$scope.slides.push(data[1]);
$scope.slides.push(data[2]);
$scope.slides[$scope.index].active=true;

$scope.populateCarouselWithCategory = function(index) {
  $scope.slides[index].active=true;
  $scope.index=index;
};

}]);

app.factory('dataService', [function() {

return {
  getCategories: getCategories,
};

function getCategories() {
  return [
    { category: 'Category A', items: [
      {id: 'a', name: 'Subcategory A', image: 'http://lorempixel.com/g/400/200'},
      {id: 'b', name: 'Subcategory B', image: 'http://lorempixel.com/g/401/200'},
      {id: 'c', name: 'Subcategory C', image: 'http://lorempixel.com/g/402/200'},
      {id: 'd', name: 'Subcategory D', image: 'http://lorempixel.com/g/403/200'},
    ],},
    { category: 'Category B', items: [
      {id: 'e', name: 'Subcategory E', image: 'http://lorempixel.com/g/404/200'},
      {id: 'f', name: 'Subcategory F', image: 'http://lorempixel.com/g/405/200'},
    ],},
    { category: 'Category C', items: [
      {id: 'g', name: 'Subcategory G', image: 'http://lorempixel.com/g/406/200'},
      {id: 'h', name: 'Subcategory H', image: 'http://lorempixel.com/g/407/200'},
    ],},
  ];
}
}]);

Answer 1

我认为你需要停用旧的类别索引，以防止这两个类别变为“活动”。 Here一名工作人员。

$scope.oldIndex = 0;
$scope.populateCarouselWithCategory = function(index) {
  $scope.slides[$scope.oldIndex].active=false;
  $scope.slides[index].active=true;
  $scope.oldIndex = index;
};

防止Angular UI Bootstrap Carousel幻灯片在转换期间合并

1 个答案: