Angular UI Boostrap製作新幻燈片後設置活動幻燈片

Question

我有一個簡單的Carousel示例。 Plnkr上的例子顯示了我在我的應用程序中做了什麼。我必須更改我的應用程序中的幻燈片。當我在更換幻燈片後設置了活動幻燈片後，它會進入該幻燈片，然後滑出或遺忘至第一張幻燈片。我怎麼解決這個問題？所以，在製作新的幻燈片後，我可以去正確的幻燈片？

http://plnkr.co/edit/PJg9U4HZ1k5aSTSvbl3k?p=preview

angular.module('plunker', ['ui.bootstrap', 'ngTouch']); 
    function CarouselDemoCtrl($scope) { 
     $scope.genderPerson = "men"; 
     $scope.myInterval = -1; 
     $scope.slides = []; 

     $scope.$watch("genderPerson", function(newValue, oldValue) { 
      $scope.MakeSlides(); 
     }); 

     $scope.MakeSlides = function() { 
      var newSlides = []; 
      for (var i = 0; i < 10; i++) { 
       newSlides[i] = { image: 'http://api.randomuser.me/portraits/' + $scope.genderPerson + '/' + i + '.jpg' }; 
      } 
      $scope.slides = newSlides; 
      if ($scope.slides[6]) { 
       $scope.slides[6].active=true; 
      } 
     } 
    } 

Answer 1

貌似有一個競爭條件，如果我換行活動的幻燈片與延遲超時設置似乎工作：

$timeout(function() { 
    $scope.slides[6].active=true; 
    }, 100); 

Answer 2

我只是在努力與此問題。這裏是我過於技術黑客完全合法的解決方案：

1.創建一個新的指令，覆蓋addSlide方法

.directive('onCarouselChange', function ($animate, $parse) { 
    return { 
     require: 'carousel', 
     link: function (scope, element, attrs, carouselCtrl) { 
      var origAdd = carouselCtrl.addSlide; 
      carouselCtrl.addSlide = function(slide, element) { 
       origAdd.apply(this, arguments); 
       $animate.on('enter', element, function (elem, phase) { 
        if (phase === 'close') { 
         scope.$emit('carouselEntered'); 
        } 
       }); 
      }; 
     } 
    }; 
}) 

這當傳送帶的ngRepeat已完成分析其新元素將發出一個事件。

2.添加新指令轉盤元素

<carousel interval="myInterval" on-carousel-change> 

3.設置活動幻燈片上的事件監聽器

事件偵聽器添加到該功能在其中添加的元素，並設置其回調中的活動幻燈片

$scope.MakeSlides = function() { 
    var newSlides = []; 
    for (var i = 0; i < 10; i++) { 
     newSlides[i] = { image: 'http://api.randomuser.me/portraits/' + $scope.genderPerson + '/' + i + '.jpg' }; 
    } 
    $scope.slides = newSlides; 
    var dereg = $scope.$on('carouselEntered', function(event, data) { 
     if ($scope.slides[6]) { 
      $timeout(function() { 
       $scope.slides[6].active=true; 
      }); 
      dereg(); 
     } 
    }); 
} 

所有這一切都有可能歸功於$ animate事件的魔力。