display steps as a carousel

[brusand]

hi Ben,

it is not an issue, just a question. I want to display steps with bullet like carousels, are steps list and currentstep publics throught a controler ?

thx
Bruno

I am using the exact versions of the following:

• Browser: [Chome|Firefox|IE|Safari] Version: x.x
• AngularJS: x.x.x
• Angular Bootstrap: x.x.x
• Angular UI Tour: x.x.x

I have installed this library via: (NPM, Bower, or downloaded package)

I have observed the following behavior:

This is how I expected it to behave:

Here is my tour config, and all related step configs:

var tourConfig = {};

<div ui-tour></div>

<div tour-step></div>

Additional notes/code:

[benmarch]

Hey Bruno,

I'm not exactly sure what you want to do, but getCurrentStep() is public, and _getSteps() is private. You are welcome to use _getSteps(), but I might make a breaking change in the future without documenting it (that's really the only risk).

-Ben

[brusand]

i have to implement something like that

<div class="onboarding">

  <div class="onboarding-content tour-step-content" ng-bind-html="tourStep.trustedContent || tourStep.content" translate></div>
  <div class="">
    <ol ng-repeat="step in $ctrl.uiTourService.getTour()._getSteps()">
      <li  ng-if="! step === $ctrl.uiTourService.getTour().getCurrentStep()" class="dot"></li>
      <li  ng-if="step === $ctrl.uiTourService.getTour().getCurrentStep()" class="dot-active"></li>
    </ol>
    </div>
</div>

but i don t know how to reference the uiTourController in angular 1.5

[benmarch]

I updated your comment, please wrap all code in triple back ticks (``` ...code... ```).

I don't think what you are trying to do will work as expected, but if you want to get a reference to the TourController I recommend just using your existing references. Every tour object is an instance of TourController, so you can probably use something like $ctrl.welcome._getSteps() and $ctrl.welcome.getCurrentStep().

[brusand]

Good news, i don t know why it s works but it works ;-)
<span ng-repeat="step in tour._getSteps()"> <img ng-if="! (step === tour.getCurrentStep())" src="../../assets/images/dot-inactive.svg" class="dot-inactive"> <img ng-if="step === tour.getCurrentStep()" src="../../assets/images/dot-active.svg" class="dot-active"> </span>

thx

[benmarch]

Sweet! Glad it's working!