can t change templateUrl

[brusand]

I am using the exact versions of the following:

• Browser: [Chome|Firefox|IE|Safari] Version 58.0.3029.110 (64-bit)
• AngularJS: "angular": "1.5.5"
• Angular Bootstrap:" angular-ui-bootstrap": "1.3.3"
• Angular UI Tour: "angular-ui-tour": "^0.8.1",

I have installed this library via: (NPM, Bower, or downloaded package)
npm
I have observed the following behavior:
in my html, i set tour-step-templateUrl = "mainmenu.html"

in my controller
public $onInit() {
this.$templateCache.put('mainmenu.tpl.html', ONBOARDING_MAIN_MENU_TPL);

and it is still the default template displayed

This is how I expected it to behave:

i want to see my tour step with my template (end tour before next/prev)

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

var tourConfig = {};

<nav id="header-bottom" class="navbar navbar-default navbar-secondary" ng-show="$ctrl.isAuth" role="navigation"
      ui-tour
      ui-tour-on-ready="$ctrl.startTourOnFirstVisit()"
      ui-tour-popupClass="text-primary"
      >
      ...
        <li
          <a id="dashboard-nav-link" href="#/dashboard" 
            <span class="visible-xs">Home</span>
          </a>
          <tour-step
             tour-step-title="Dashboard Menu"
             tour-step-content="Navigate the Dashboard this menu."
             tour-step-placement="bottom-left"
             tour-step-templateUrl="mainmenu.tpl.html">
          </tour-step>
        </li>
</nav>

```html my templateUrl = mainmenu.tpl.html
<div>
  <div class="popover-content tour-step-content col-md-3" ng-bind-html="tourStep.trustedContent || tourStep.content"></div>
  <div class="popover-navigation tour-step-navigation col-md-3">
    <a class="" ng-click="tour.end()">skip the tour</a>
    <div class="table-control">
      <button type="button" class="btn btn-sm btn-default" ng-if="tourStep.isPrev()" ng-click="tour.prev()">&laquo; Prev</button>
      <button type="button" class="btn btn-sm btn-default" ng-if="tourStep.isNext()" ng-click="tour.next()">Next &raquo;</button>
      <button type="button" class="btn btn-sm btn-default" ng-click="tour.pause()">Pause</button>
    </div>
  </div>
</div>

Additional notes/code:
have you got some samples of ui-tour ? with backdrops ?

best regards
Bruno

[benmarch]

Hey Bruno,

Try using tour-step-template-url="mainmenu.tpl.html".

Thanks,
Ben

[brusand]

nop, it doesn t work.
i think it is normal, when you create step (tour-step-service.js) , you call createPopup() and createPopup $compile($templateCache.get('tour-step-popup.html'))(scope),
is it normal to have explicit 'tour-step-popup.html' ?

function createPopup(step, tour) {
    const scope = angular.extend($rootScope.$new(), {
            tourStep: step,
            tour: tour
        }),
        popup = $compile($templateCache.get('tour-step-popup.html'))(scope),
        parent = step.config('appendToBody') ? angular.element($document[0].body) : step.element.parent();

    parent.append(popup);
    return popup;
}

best regards
Bruno

[benmarch]

Yes, tour-step-popup.html contains an ngInclude that loads the user-defined template: https://github.com/benmarch/angular-ui-tour/blob/master/app/templates/tour-step-popup.html#L19

Ahhh ok I see the problem: the templateUrl option is interpolated, so you have to surround it in quotes: tour-step-template-url="'mainmenu.tpl.html'".

Sorry about that, it seems confusing. I'll circle back to this and see if it makes sense to keep it this way. If so, I will make it clear in the documentation.

Thanks,
Ben

[brusand]

you made my day, Ben, it works like a charm :-)

ui-tour-template-url="'mainmenu.tpl.html'" did it.

however, have you some sample of backdrop ? (i can t see any difference when i set bacdrop = true or false)

so many thks for your component.

Bruno

[benmarch]

Glad that worked!!

For the backdrop, you will have to style it yourself (this was a feature request a while back, to be able to style the backdrop differently). There is an example in the Getting Started section of the README that you can just paste into your stylesheet.