How to load intro's html from templateUrl? about angular-intro.js HOT 5 OPEN

I have the same doubt that @shyamal890

from angular-intro.js.

you can create your directive and compile your directive in before change event.
*/directive
function tour() {
return {
templateUrl: "app/components/tour/templates/tour.html",
replace: true,
scope: {
totalResults: "=",
currentPage: "=",
title: "=",
content: "="
},
bindToController: true,
controller: TourCtrl,
controllerAs: "tour"
};
}

angular
.module("components")
.directive("tour", tour);

template
div class='popover-inner'>
h1 class='popover-title'>{{ tour.title }} - {{ tour.currentPage }} of {{ tour.totalResults }}</h1
div class='popover-content' ng-bind-html="tour.content"></div
div class="form form--horizontal">

/div>

/div>

steps
steps:[
{
element: '#step1',
intro: "div class='tourDirective' tour title='title' current-page='currentPage' total-results='totalResults' content='content'></div"
},
}

/**
* into after change
*
*/
function onIntroAfterChange(targetElement, scope) {
$timeout(function () {
var el = angular.element('.introjs-tooltip');
modalScope = scope.$new();
modalScope.title = data.title;
modalScope.currentPage = data.currentPage;
modalScope.totalResults = modalScope.ngIntroOptions.steps.length;
modalScope.content = data.content;
$compile(element.contents())(modalScope);
}, 500);
}

from angular-intro.js.

@farooqsah Is there a way to use directive as template without timeout 500ms?
It looks bad when after some timeout tooltip expands :(

Thanks!

from angular-intro.js.

@pavlokitdev unfortunately onIntroAfterChange doesn't works as expected so i had to use timeout.

from angular-intro.js.

Any updated solution to this issue?

from angular-intro.js.