How to give url to maintain the flow of the tour

[suriyagp]

can give the path="url-to-go" as attribute inside the tag? where we are specifiying the tour order.

Is possible to specify the path like the above???

[benmarch]

Do you mean a url to navigate to when you click the "Next" or "Previous" button? If so, try creating an "onNext" or "onPrev" function that will handle the redirect for you. What is the specific use case?

[suriyagp]

i am developing single page app in which i have load different html template. where can i put those functions inside the directive? or my custom function?? kindly explain with an example

[benmarch]

You would put them in a controller...

<div ng-controller="MyController">
    <div id="someTourElement" tour-step on-next="goToPageTwo()"> ... </div>
    ...
</div>

then...

angular.module('MyModule').controller('MyController', function ($scope, $location) {
    $scope.goToPageTwo = function () {
        $location.path('pageTwo');
    };
});

This example assumes you are using Angular routing to load the HTML template, but something along these lines should do the trick!

[suriyagp]

it works but there is some problem, i am having order="0" at /path1 and order="1" same /path1. Then i am having my order="2" on the /path2. at the tour step of order="1" the "next" button is get disabled how to maintain the flow of tour steps between various path.

After switching the path need to maintain the same tour flow

[benmarch]

Ah ok that might be a bug, if there is no next element visible it will disable the button. I'll have to see how Bootstrap Tour handles navigation and I will integrate it with this plugin.

[suriyagp]

Ok waiting for that :+1:

[benmarch]

I have added this functionality to 0.3.0.

To use it you will specify either a nextPath or prevPath (or both) and a nextStep or prevStep. For example:

view1.html:

<div tour-step="step1" title="Step 1 on View 1" next-path="view2" next-step="step2">...</div>

<div tour-step="step3" title="Step 3 on View 1" prev-path="view2" prev-step="step2">...</div>

view2.html:

<div tour-step="step2" title="Step 2 on View 2" next-path="view1" next-step="step3" prev-path="view1" prev-step="step1">...</div>

When you start the tour on page 1, the tour will load up step 1 first. When you click next it will navigate to '/view2' and load up step 2. When you click next on step 2 it will navigate back to view1 and load up step 3. Notice step 2 has a next and prev option so that it will be continuous regardless of the direction you are touring in.

This does not allow for navigation other than Angular routing ATM, but I can build into the next release. Hopefully this will cover your case for now.

The reason we can't use "path" the way that BT uses it is because in BT all the steps are laid out up front and it can determine how to navigate through them. But because we use directives to create the list of steps there is no way for us to know if there is another step on a different page. Using prev and next will create a simple flow control mechanism that can be expanded to same page navigation using step names instead of numeric orders, and multiple page navigation using browser navigation instead of Angular routing.

Take a look at the updated demo to see it in action.