Can't get first tour step to do anything

[jrdn91]

I am using the exact versions of the following:

• Browser: Chome Version 61.0.3163.100 (Official Build) (64-bit)
• AngularJS: v1.6.1
• Angular Bootstrap: 2.5.0
• Angular UI Tour: 0.9.0

I have installed this library via: Bower

I have observed the following behavior:

Creating a detached tour and then trying to assign steps to them pulls up the first step when I can start() but none of the buttons in the step work

This is how I expected it to behave:

I expect that the next pause or end buttons should just work

Here is my tour config, and all related step configs:

// in a .run block
uiTourService.createDetachedTour('eventSettingsTour', {backdrop: true});

<uib-tab bb-tab-sref="Home.Event.Settings"><div ui-view="eventSettings" event="event"></div>
  <uib-tab-heading tour-step tour-step-placement="right" tour-step-order="0" tour-step-belongs-to="eventSettingsTour" tour-step-title="Event Settings Tab" tour-step-content="Here is where all the event settings are controlled for your event.">
    <i class="fa fa-cog" aria-hidden="true"></i>
    Event Settings
  </uib-tab-heading>
</uib-tab>

<uib-tab bb-tab-sref="Home.Event.CheckIn" ng-hide="tickets.length === 0"><div ui-view="eventCheckIn" event="event"></div>
  <uib-tab-heading tour-step tour-step-order="1" tour-step-belongs-to="eventSettingsTour" tour-step-title="Event Check-In Tab" tour-step-content="Here is where all your event attendees will show up if they have purchased tickets to your event">
    <i class="fa fa-clipboard" aria-hidden="true"></i>
    Event Check-In
    <span class="bb-tab-header-count" ng-if="ticketHolders && ticketHolders.length > 0">{{(ticketHolders | filter:{'ticket_purchase_refunded':'0'}).length}}</span>
    <span class="bb-tab-header-count" ng-if="!ticketHolders"><i class="fa fa-spinner fa-spin fa-fw"></i></span>
  </uib-tab-heading>
</uib-tab>

Additional notes/code:

Here is how I'm starting the tour...

$scope.openTour = function(){
  if($state.current.name === "Home.Event.Settings"){
    uiTourService.getTourByName('eventSettingsTour').start();
  }
}

[benmarch]

Hey @Jordan4jc, can you check something for me... I just noticed that bower.json was not updated when I released version 0.9.1, but there is a GH release for it. Can you confirm that you are using 0.9.0 by checking if there is a dependency on ez-ng? There was an issue with ez-ng and Angular 1.6 so I removed it in 0.9.1. If you are using 0.9.0 please try upgrading to 0.9.1.

If that doesn't fix it, this might be related to the way the uib-tabs work. If they use logic similar to ng-if then that could explain why the buttons don't work (because the tour would not be aware of a step that has been removed from the DOM). The way around that would be to add a tour-step-on-next on the first step to show the next tab.

Let me know if either of those solutions help.

[jrdn91]

Here is what I see in the bower.json included in the package in my bower_components

{
  "name": "angular-ui-tour",
  "version": "0.9.0",
  "main": "dist/angular-ui-tour.js",
  "ignore": [
    ".editorconfig",
    ".gitattributes",
    ".gitignore",
    ".jshintrc",
    ".npmignore",
    ".travis.yml",
    ".umd",
    "gruntfile.js",
    "npm-shrinkwrap.json",
    "package.json",
    "karma.conf.js",
    "app/",
    "lib/",
    "test/"
  ],
  "dependencies": {
    "angular": ">=1.5",
    "angular-sanitize": ">=1.5",
    "cfp-angular-hotkeys": "1.7.0",
    "hone": "1.0.3",
    "tether": "1.4.0",
    "angular-scroll": "1.0.0",
    "angular-bind-html-compile": "1.4.1"
  },
  "devDependencies": {
    "angular-mocks": ">=1.3",
    "angular-route": ">=1.3"
  },
  "resolutions": {
    "angular": "latest"
  }
}

[benmarch]

Ok cool, so that looks like it is supposed to be 0.9.1, so that's good :)

I think this has something to do with the tab components, I've seen similar issues with ngIf and ngRepeat. You can try using the lifecycle hook that I described above, or creating detached steps using the tour.createStep() method (you might still need the lifecycle hook though).

[jrdn91]

I have tried adding that to the first step but the callback is not being called at all

<uib-tab bb-tab-sref="Home.Event.Settings"><div ui-view="eventSettings" event="event"></div>
  <uib-tab-heading tour-step tour-step-on-next="nextCalled()" tour-step-placement="right" tour-step-order="0" tour-step-belongs-to="eventSettingsTour" tour-step-title="Event Settings Tab" tour-step-content="Here is where all the event settings are controlled for your event.">
    <i class="fa fa-cog" aria-hidden="true"></i>
    Event Settings
  </uib-tab-heading>
</uib-tab>

$scope.nextCalled = function(){
  console.log('next called');
}

[benmarch]

Ok, can you try moving the tour-step off the uib-tab-heading element and into its own div? Something like this:

<uib-tab bb-tab-sref="Home.Event.Settings"><div ui-view="eventSettings" event="event"></div>
  <uib-tab-heading>
    <div tour-step tour-step-on-next="nextCalled()" tour-step-placement="right" tour-step-order="0" tour-step-belongs-to="eventSettingsTour" tour-step-title="Event Settings Tab" tour-step-content="Here is where all the event settings are controlled for your event.">
      <i class="fa fa-cog" aria-hidden="true"></i>
      Event Settings
    </div>
  </uib-tab-heading>
</uib-tab>

[jrdn91]

Yeah, this doesn't work either. I'm going to try to create adhoc steps and see what happens

[benmarch]

Ok good luck. Let me know how it goes. Are there any errors, btw?

[jrdn91]

No errors, also, adhoc steps aren't working either.

[jrdn91]

$scope.openTour = function(){
      if($state.current.name === "Home.Event.Settings"){
        var tour = uiTourService.getTourByName('eventSettingsTour');
        tour.createStep({
          selector: '.settings-tab',
          order: 1,
          title: 'Event Settings Tab',
          content: 'Here is where all the event settings are controlled for your event.'
        });
        tour.createStep({
          selector: '.check-in-tab',
          order: 2,
          title: 'Event Check-In Tab',
          content: 'Here is where all your event attendees will show up if they have purchased tickets to your event'
        });
        tour.start();
      }
    }

[benmarch]

Hmmm, is there any way I can take a look at the whole app to help debug?

There are some debugging functions like tour._getSteps() that might be helpful to determine if the tour is getting properly created. Try logging the result of that just before you start the tour, and inspecting the element property of each step (make sure they are in the DOM).

Can you try adding the steps when you create the tour instead of before you start it? The DOM is only queried when the step is supposed to show, so it's ok if the UI has not yet initialized when you create the steps.

[jrdn91]

Moved the steps configuration into the .run block

Also, console logged the ._getSteps before I start the tour and here is what I see

uiTourService.createDetachedTour('eventSettingsTour', {backdrop: true});
    var tour = uiTourService.getTourByName('eventSettingsTour');
    tour.createStep({
      selector: '.settings-tab',
      order: 1,
      title: 'Event Settings Tab',
      content: 'Here is where all the event settings are controlled for your event.'
    });
    tour.createStep({
      selector: '.check-in-tab',
      order: 2,
      title: 'Event Check-In Tab',
      content: 'Here is where all your event attendees will show up if they have purchased tickets to your event'
    });

[benmarch]

I will play around with some of this in my local env. In the meantime, can you try to remove the uib-tabs from the equation by creating another step outside of the tabs?

[jrdn91]

I moved them onto a couple labels and it still doesn't work. It still seems the second step has no element. Not sure if that's supposed to happen when opening the first step?

[benmarch]

It's supposed to query for the element just before the step is shown. I wonder if I introduced a bug recently. I'll keep looking into it. Thanks for your help and patience.

[jrdn91]

Any updates so far?