I'm using angular-ui-tour to enable my project to have multiple tours within the same DOM, because is has a detached tour option which I need to do so.
My dependencies (relevant for this issue):
I can initialize the tour with the according config, but when I check for steps, no steps are found.
When I try to start the tour, the error confirms this: 'No step.'-error. What am I missing here?
angular.module('myApp',['bm.uiTour']).run(['uiTourService',
function(uiTourService) {
//setup the tour
uiTourService.createDetachedTour('general', {
name: 'general',
backdrop: true,
debug: true
});
//testing
var uitour = uiTourService.getTourByName('general');
console.log(uitour); // Object {_name: undefined, initialized: true}
//test tour steps
console.log(uitour._getSteps()); // []
//test tour start
uitour.start().then(function(data) {
//tour start succeeded
}, function(error) {
//tour start failed
console.log(error); // No steps.
});
}
]);
<body ui-tour>
<div tour-step tour-step-belongs-to="general"
tour-step-order="1"
tour-step-title="step 1"
tour-step-content="this is step 1">
</div>
<div tour-step tour-step-belongs-to="general"
tour-step-order="2"
tour-step-title="step 2"
tour-step-content="this is step 2">
</div>
</body>
I've managed to resolve this question. Apparently this is a known bug of angular-ui-tour and will be fixed in the next patch.
For more information about this question, I can refer you to the issue on the GitHub.
For now, you can resolve the issue by making the following change in the angular-ui-tour tourStep directive:
//Add step to tour (old)
scope.tourStep = step;
scope.tour = scope.tour || ctrl;
//Add step to tour (new)
scope.tourStep = step;
scope.tour = ctrl;