1

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):

  • angular 1.5.7
  • bootstrap ^3.3.6
  • angular-bootstrap ^2.0.0
  • angular-ui-tour ^0.6.2

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>
Pim Van Vlaenderen
  • 117
  • 1
  • 12
  • I've come to the point where I noticed another bower component was scrambling with the tour (I had to uninstall angular-bootstrap-tour). Now I see the first step, but no content or buttons are shown. – Pim Van Vlaenderen Oct 13 '16 at 15:29
  • I can toggle through the steps using the hotkeys, so the steps are attached. The buttons are just not shown on the step, same goes for the content – Pim Van Vlaenderen Oct 14 '16 at 08:03

1 Answers1

0

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;
Pim Van Vlaenderen
  • 117
  • 1
  • 12