Comments (5)
Hey @jduprey, the steps should automatically be added to the tour once they are linked. Are you experiencing different behavior?
from angular-bootstrap-tour.
Yes.:
Here is the step before the modal dialog is opened. This step asked them to click a button. Reflex=true should have it advance to the next step, even when I remove it the current step's "next" button is disabled.
Step prior to dialog box:
<div class="col-md-1 grokker-series-add" uib-tooltip="{{!isLoggedIn() ? 'Please Log In to' : ''}} Load or Begin New Series" tooltip-placement="top" >
<span class="btn" ng-click="addSeries()" ng-disabled="!isLoggedIn()"><a class="bento-icon-add"
tour-step="series-button" bs-tour-reflex="true" bs-tour-order="100" bs-tour-placement="bottom" bs-tour-content='Click the new Series button to define a new group of queries.'></a></span>
</div>
on click of the "serried-button", addSeries() opens the modal
$scope.addSeries = function () {
var modalInstance = $uibModal.open({
animation : true,
templateUrl: 'app/views/partials/page/series-crud.html',
controller : 'AddSeriesCtrl',
scope : $scope,
size : 'lg',
resolve : {
contentTypes : function () {
return ContentType.query();
},
seriesForUser: function () {
return Series.query({'uid': Auth.getCurrentUser()._id});
}
}
});
and w/in series-crud.html:
<div class="panel-default">
<div class="panel-heading series-panel-heading"
tour-step="series-dialog" bs-tour-order="110" bs-tour-placement="top" bs-tour-content='Define your series!.'>Series Options</div>
<div class="panel-body wrapper-add-series-panel-body">
from angular-bootstrap-tour.
Ok it looks like there are two issues: the first is that the current step does not know about the next step when it is shown, so the "Next" button is disabled; and the second is that the navigation is happening before the next step loads. To fix both issues, try setting the "nextPath" and "nextStep" options on the tour step. Set the "nextPath" to the current Angular $location path (or "/" if you aren't using Angular router) and the "nextStep" to the name of the tour step in the modal. What this will do is tell the tour that there is another step, but it is not yet available, and then the tour will wait for that particular step to load before navigating to it.
I also noticed that you are using UI Bootstrap in your application. I highly recommend that you switch over to using Angular UI Tour instead of Angular Bootstrap Tour as it resolves many of the issues found in this library, and I expect to support it much longer.
from angular-bootstrap-tour.
Yes. I came across "Angular UI Tour" yesterday when I was looking for a solution. Thank you.
from angular-bootstrap-tour.
@benmarch I did the next path + next step on angular-ui-tour, but the "next" button is still hidden. I left 'tour-step-next-path=""', otherwise it would redirect me to a wrong page, and 'tour-ste-next-step="User data"', which is the title of the step inside the modal.
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
- 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.