角UI自举旋转木马制作幻灯片的新设置后，活动幻灯片 [英] Angular UI Boostrap Carousel setting active slide after making new slides

问题描述

我有一个简单的旋转木马的例子。在Plnkr的例子显示了我在我的应用程序做的。我必须要改变的幻灯片在我的应用程序。当我设置活动幻灯片更改幻灯片后，转到该幻灯片，然后滑出被遗忘，或者转到第一张幻灯片。我怎样才能解决这个问题？这样使得新的幻灯片后，我可以去右滑？

http://plnkr.co/edit/PJg9U4HZ1k5aSTSvbl3k?p=$p$ PVIEW

  angular.module（'plunker'，['ui.bootstrap'，'ngTouch']）;
    功能CarouselDemoCtrl（$范围）{
        $ scope.genderPerson =男人;
        $ scope.myInterval = -1;
        $ scope.slides = [];        $范围。$表（genderPerson功能（为newValue，属性oldValue）{
            $ scope.MakeSlides（）;
        }）;        $ scope.MakeSlides =功能（）{
            变种newSlides = [];
            为（变量I = 0; I＆小于10;我++）{
                newSlides [i] = {形象：http://api.randomuser.me/portraits/'+ $ scope.genderPerson +'/'+ I +名为.jpg};
             }
             $ scope.slides = newSlides;
             如果（$ scope.slides [6]）{
                 $ scope.slides [6]。主动= TRUE;
             }
        }
    }
 

解决方案

看起来像有一个竞争条件，如果我换行活动的幻灯片在超时设定似乎工作延迟：

  $超时（函数（）{
    $ scope.slides [6]。主动= TRUE;
  }，100）;
 

I have a simple Carousel example. The example on Plnkr shows what I do in my application. I have to change the slides in my application. When I set the active slide after I change slides it goes to that slide and then slides out into oblivion or it goes to the first slide. How can I solve this problem? So that after making new slides I can go to the right slide?

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;
             }
        }
    }

解决方案

Looks like there is a race condition, if I wrap the active slide set in a timeout with a delay it seems to work:

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

这篇关于角UI自举旋转木马制作幻灯片的新设置后，活动幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！