Comment vous liez-vous aux événements Diapositive Carousel d'Angular-UI?

Je suis en utilisant Angulaire de l'INTERFACE utilisateur du carrousel et j'ai besoin de raconter mon google charts pour redessiner après qu'ils ont glissé dans la vue. En dépit de ce que j'ai lu, je n'arrive pas à accrocher dans l'événement.

Voir ma tentative:
http://plnkr.co/edit/Dt0wdzeimBcDlOONRiJJ?p=preview

HTML:

<carousel id="myC" interval="myInterval">
  <slide ng-repeat="slide in slides" active="slide.active">
    <img ng-src="{{slide.image}}" style="margin:auto;">
    <div class="carousel-caption">
      <h4>Slide {{$index}}</h4>
      <p>{{slide.text}}</p>
    </div>
  </slide>
</carousel>

Sur le document de charge:

$('#myC').live('slid.bs.carousel', function (event) { console.log("slid"); } );

Il doit travailler à quelque chose comme ceci:
http://jsfiddle.net/9fwuq/ - non-angular-ui carrousel

Peut-être il est plus Anguleuse de manière à accrocher dans le fait que ma carte est glissée dans l'affichage?

source d'informationauteur jduprey | 2014-07-10

Il y a 3 façons je pense, et cela dépend de votre exigence.

Veuillez voir http://plnkr.co/edit/FnI8ZX4UQYS9mDUlrf6o?p=preview pour des exemples.

utiliser $scope.$montre d'une diapositive pour vérifier si il est devenu actif.

$scope.$watch('slides[0].active', function (active) {
  if (active) {
    console.log('slide 0 is active');
  }
});

utiliser $scope.$regarder avec la fonction personnalisée pour trouver une diapositive active.

$scope.$watch(function () {
  for (var i = 0; i < slides.length; i++) {
    if (slides[i].active) {
      return slides[i];
    }
  }
}, function (currentSlide, previousSlide) {
  if (currentSlide !== previousSlide) {
    console.log('currentSlide:', currentSlide);
  }
});

utiliser un custom directive pour intercepter la fonction select() du carrousel de la directive.

.directive('onCarouselChange', function ($parse) {
  return {
    require: 'carousel',
    link: function (scope, element, attrs, carouselCtrl) {
      var fn = $parse(attrs.onCarouselChange);
      var origSelect = carouselCtrl.select;
      carouselCtrl.select = function (nextSlide, direction) {
        if (nextSlide !== this.currentSlide) {
          fn(scope, {
            nextSlide: nextSlide,
            direction: direction,
          });
        }
        return origSelect.apply(this, arguments);
      };
    }
  };
});

et de l'utiliser comme ceci:

$scope.onSlideChanged = function (nextSlide, direction) {
    console.log('onSlideChanged:', direction, nextSlide);
};

et dans le modèle html:

<carousel interval="myInterval" on-carousel-change="onSlideChanged(nextSlide, direction)">
...

Espère que cela aide : )

AngularUI Bootstrap a changé les conventions de nommage pour les contrôleurs comme ils ont précédé de toutes leurs contrôleurs avec le préfixe uibce qui est en bas est la solution mise à jour de la solution d'origine fournis par runTarm:

Angulaire:

.directive('onCarouselChange', function($parse) {
    return {
        require: '^uibCarousel',
        link: function(scope, element, attrs, carouselCtrl) {
            var fn = $parse(attrs.onCarouselChange);
            var origSelect = carouselCtrl.select;
            carouselCtrl.select = function(nextSlide, direction, nextIndex) {
                if (nextSlide !== this.currentSlide) {
                    fn(scope, {
                        nextSlide: nextSlide,
                        direction: direction,
                        nextIndex: this.indexOfSlide(nextSlide)
                    });
                }
                return origSelect.apply(this, arguments);
            };
        }
    };
});

Angulaire avec Tapuscrit:

module App.Directive {

    export class CarouselChange implements ng.IDirective {

        public require: string = '^uibCarousel';

        constructor(private $parse: ng.IParseService) { }

        public link: ng.IDirectiveLinkFn = (scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: any, carouselCtrl: any) => {
            var fn = this.$parse(attributes.carouselChange);
            var origSelect = carouselCtrl.select;
            carouselCtrl.select = function(nextSlide, direction) {
                if (nextSlide !== this.currentSlide) {
                    fn(scope, {
                        nextSlide: nextSlide,
                        direction: direction
                    });
                }
                return origSelect.apply(this, arguments);
            };
        }

        static Factory(): ng.IDirectiveFactory {
            var directive: ng.IDirectiveFactory = ($parse: ng.IParseService) => new CarouselChange($parse);
            directive['$inject'] = ["$parse"];
            return directive;
        }
    }
}

Merci,

À la suite de la réponse donnée par runTarm Si vous voulez connaître l'indice de la diapositive suivante, vous devez ajouter quelque chose comme ceci:

 .directive('onCarouselChange', function ($parse) {
    return {
      require: 'carousel',
          link: function (scope, element, attrs, carouselCtrl) {
            var fn = $parse(attrs.onCarouselChange);
            var origSelect = carouselCtrl.select;
            carouselCtrl.select = function (nextSlide, direction,nextIndex) {
      if (nextSlide !== this.currentSlide) {
        fn(scope, {
          nextSlide: nextSlide,
          direction: direction,
          nextIndex:this.indexOfSlide(nextSlide)
        });
      }
      return origSelect.apply(this, arguments);
    };
  }
  };
})

Puis, dans le contrôleur, vous avez juste besoin de faire cela pour attraper le nouvel indice:

$scope.onSlideChanged = function (nextSlide, direction, nextIndex) {
    console.log(nextIndex);
}

J'ai réussi à modifier runTarm la réponse de sorte qu'il appelle le callback une fois la diapositive a fini coulissant en vue (c'est à dire le glissement animation est terminée). Voici mon code:

.directive('onCarouselChange', function ($animate, $parse) {
    return {
        require: 'carousel',
        link: function (scope, element, attrs, carouselCtrl) {
            var fn = $parse(attrs.onCarouselChange);
            var origSelect = carouselCtrl.select;
            carouselCtrl.select = function (nextSlide, direction) {
                if (nextSlide !== this.currentSlide) {
                    $animate.on('addClass', nextSlide.$element, function (elem, phase) {
                        if (phase === 'close') {
                            fn(scope, {
                                nextSlide: nextSlide,
                                direction: direction,
                            });
                            $animate.off('addClass', elem);
                        }
                    });
                }
                return origSelect.apply(this, arguments);
            };
        }
    };
});

Le secret réside dans l'utilisation de $animer le gestionnaire d'événements à appeler notre fonction une fois l'animation terminée.

voici une autre méthode qui utilise des contrôleurs, quelque part entre runTarm #2 et #3.

HTML d'origine + une nouvelle div:

<carousel id="myC" interval="myInterval">
  <slide ng-repeat="slide in slides" active="slide.active">
    <div ng-controller="SlideController"> <!-- NEW DIV -->
      <img ng-src="{{slide.image}}" style="margin:auto;">
      <div class="carousel-caption">
        <h4>Slide {{$index}}</h4>
        <p>{{slide.text}}</p>
      </div>
    </div>
  </slide>
</carousel>

la coutume de contrôleur:

  .controller('SlideController',
    function($log, $scope) {
      var slide = $scope.slide;
      $scope.$watch('slide.active', function(newValue) {
        if (newValue) {
          $log.info("ACTIVE", slide.id);
        }
      });
    });

Et si vous voulez juste de commencer la lecture d'une vidéo lorsque le slide est en vue, et de faire une pause quand il quitte:

{# Uses angular v1.3.20 & angular-ui-bootstrap v0.13.4 Carousel #}
{% addtoblock "js" %}<script type="text/javascript">
angular.module('videoplay', []).directive('videoAutoCtrl', function() {
  return {
    require: '^carousel',
    link: function(scope, element, attrs) {
      var video = element[0];
      function setstate(visible) {
        if(visible) {
          video.play();
        } else {
          video.pause();
        }
      }
      //Because $watch calls $parse on the 1st arg, the property doesn't need to exist on first load
      scope.$parent.$watch('active', setstate);
    }
  };
});
</script>{% endaddtoblock %}
{% addtoblock "ng-requires" %}videoplay{% endaddtoblock %}

REMARQUE: A des bits supplémentaires pour Django

HTML:

<carousel interval="15000">
  <slide>
   <video class="img-responsive-upscale" video-auto-ctrl loop preload="metadata">
    <source src=
...

Vous devez vous connecter pour publier un commentaire.