вызов angular ui.bootstrap.carousel next()/prev() из $scope

Как мне получить доступ к методам next()/prev() карусели со слайда? Я пытаюсь подключиться к hm-swipe-left/right, но, похоже, у меня нет нужного $scope

<carousel interval="1000">
  <slide ng-repeat="card in slides" active="card.active">
    <div class="card list-unstyled text-center">
      <ul class='header list-inline list-unstyled'
      hm-swipe-left="swipe('next')"
      hm-swipe-right="swipe('prev')">   
        <li><i class="icon {{card.icon}} fa-3x"></i></li>
        <li class="title">{{card.title}}</li>
      </ul>
    </div>
  </slide>
</carousel>

angularjs angular-ui-bootstrap
person michael    schedule 04.02.2014    source источник
comment
вы когда-нибудь находили решение этой проблемы? Я тоже ищу эту реализацию   -  person EoD    schedule 28.03.2014
comment
Я использовал угловую карусель. Он также выполняет ленивую загрузку, чтобы кэшировать только несколько слайдов в дереве DOM за раз.   -  person michael    schedule 02.04.2014

Ответы (4)


arrow_upward
-1
arrow_downward

Вот немного более простое решение:

Javascript-контроллер

$scope.carouselNext = function() {
  $('#carousel-main').carousel('next');
}
$scope.carouselPrev = function() {
  $('#carousel-main').carousel('prev');
}

HTML-просмотр

<div id="carousel-main" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-main" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-main" data-slide-to="1"></li>
    <!-- add indicators for any slides added -->
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <div id="slide1" class="item active" ng-swipe-right="carouselPrev()" ng-swipe-left="carouselNext()">
      <!-- img or content here -->
    </div>

    <div id="slide2" class="item" ng-swipe-right="carouselPrev()" ng-swipe-left="carouselNext()">
      <!-- img or content here -->
    </div>

    <!-- add more slides as needed -->

  </div>
</div>
person barmitage    schedule 25.08.2016
comment
Обратите внимание, что для этого требуется установленный модуль Angular Touch: docs.angularjs.org/api/ngTouch. - person Ian Warner; 17.10.2016

arrow_upward
2
arrow_downward

Я искал решение этой проблемы. Я опубликую то, что я наконец сделал:

В контроллере, где у вас есть карусель (убедитесь, что ваша html-карусель имеет id="myCarousel"):

$scope.showNext = function(){
    var index = ($('#myCarousel .active').index()+1)%(slides.length);
    var modIndex = (((index)%(slides.length))+(slides.length))%(slides.length);
    $scope.slides[modIndex].active=true;
}
$scope.showPrev = function(){
    var index = ($('#myCarousel .active').index()-1)%(slides.length);
    var modIndex = (((index)%(slides.length))+(slides.length))%(slides.length);
    $scope.slides[modIndex].active=true;
}

Затем на вашей HTML-странице:

<img ng-src="{{slide.image}}" style="margin:auto;" ng-swipe-right="showPrev()" ng-swipe-left="showNext()">

Надеюсь, это поможет любому! Работает для бутстрапа 3.0.2 (моя версия)

РЕДАКТИРОВАТЬ: отредактировал модуль (поскольку в javascript есть ошибка при вычислении модуля: Javascript modulo не ведет себя) Теперь работает! :)

person EoD    schedule 29.03.2014

arrow_upward
2
arrow_downward

В моем случае я просто смог это сделать

<div  ng-swipe-left="$parent.$parent.prev()" ng-swipe-right="$parent.$parent.next()"  uib-slide ng-repeat="product in vm.productList track by $index" index="$index">

Я не уверен, что рекомендуется делать $parent.$parent, но у меня это сработало отлично, и я не поместил код jquery/html в свой контроллер.

Имейте в виду, что я был внутри ng-repeat, это также может быть $parent.next() вне ng-repeat.

person Maccurt    schedule 08.10.2016
comment
Также не уверен насчет $parent.$parent, но это определенно сработало для меня. Моя разметка аналогична разметке вашего поста. - person jiminikiz; 23.01.2017

arrow_upward
0
arrow_downward

Вы можете получить область действия директивы из элемента DOM и повторно использовать ее.

    var element = angular.element('.carousel .left');

    if (element.length > 0 && element.scope && element.scope().prev) {
      element.scope().prev();
    }

   // or
    if (element.length > 0 && element.scope && element.scope().next) {
      element.scope().next();
    }
person user5368306    schedule 10.06.2016