how to implement angular-tour on a angular web app

Question

i'm trying to add a tour to a web app using the ng-tour plugin: http://daftmonk.github.io/angular-tour/ The example on the plugin home page is done on a single web page making it hard for me to figure out how to implement this on a angular web app. I added the following to my index.html:

my code:

adding the tour-step id to a view:

<div ui-view="portal" ng-show="$state.includes('portal')" id="e0"></div>

At the bottom of my index.html file:

<tour step="currentStep">
    <virtual-step tourtip="test " tourtip-element="#e0" tourtip-next-label="next" tourtip-placement="right" tourtip-step="0" ></virtual-step>

    </tour>
    </body>
</html>

Nothing happens when the app routes to the portal view... Should I add the ng-tour tag to the individual views HTML templates instead? I tried that initially but also couldn't make it work.

Answer 1

If you don't initialize currentStep in your controller it will be by default set to -1, which mean the tour won't appear on page load. -Angular tour documentation

So make sure you initialize $scope.currentStep in your controller.

Regarding multiple views, the virtual steps section of the documentation says you can define all of your steps in one spot and just target elements in different views using tourtip-element="#element-from-another-view". Of course those views will have to be on the DOM when you get to that tip.