Comments (7)
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?
from angular-bootstrap-tour.
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
from angular-bootstrap-tour.
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!
from angular-bootstrap-tour.
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
from angular-bootstrap-tour.
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.
from angular-bootstrap-tour.
Ok waiting for that 👍
from angular-bootstrap-tour.
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.
from angular-bootstrap-tour.
Related Issues (20)
- onStart and onEnd not working? HOT 5
- grunt error HOT 8
- Orphan mode does'nt work... HOT 2
- Is this project maintained? HOT 1
- How can I add more than one step to a same element? HOT 1
- More than one step to a same element HOT 1
- Angular Bootstrap tour 'end tour' when clicked stops the tour for good HOT 9
- Call tour.start() from controller HOT 5
- template-url option not working HOT 9
- Not supporting the element attribute? HOT 1
- template-url is not working HOT 3
- apply tour-step to ng-repeat HOT 1
- Center placement for element step HOT 1
- Option to lock controls HOT 1
- How to handle steps that are not rendered on tour start? HOT 5
- I want to change the prev and next to icons how can i change them to icons?? HOT 3
- starting tour from controller through ng-click is not working HOT 5
- Cannot read property 'extend' of undefined HOT 1
- Multiple page tour using bootstrap tour HOT 7
- How to use angular-bootstrap-tour with angular 4 and Typescript HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-bootstrap-tour.