Search code examples
angularjsbootstrap-tour

Why is my angular-ui-tour not finding the steps of my detached tour?


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>


Solution

  • 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;