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.

Anything in your console? Did you add angular-tour to your module as a dependency? angular.module('myApp', ['angular-tour']) — adamdport
– adamdport, Commented Aug 26, 2016 at 16:34
@adamdport yes I did add it as a dependency. And no I don't see anything in my console. — user2094257
– user2094257, Commented Aug 26, 2016 at 18:05
"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." Do you initialize $scope.currentStep in your controller? — adamdport
– adamdport, Commented Aug 26, 2016 at 18:32
Thanks @adamdport That made it work. Please add it as an answer so you can get the bounty. Also please explain to me how I can go about implementing this on multiple views? Do I have to increase the current step in every new view's controller? e.g. I want the first tooltip to appear in portal.html and the second in player.html. — user2094257
– user2094257, Commented Aug 28, 2016 at 19:22

adamdport · Accepted Answer · 2016-08-28 21:53:44Z

2

+50

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.

answered Aug 28, 2016 at 21:53

adamdport

12.8k14 gold badges73 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to implement angular-tour on a angular web app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related