How to load intro's html from templateUrl?

[shyamal890]

How to achieve something like this?

$scope.IntroOptions = { steps:[ { element: '#step1', intro: "/template.html" }, }

[fpernia]

I have the same doubt that @shyamal890

[farooqsah]

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); }

[pavlokitdev]

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

Thanks!

[farooqsah]

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

[varma-ksbh]

Any updated solution to this issue?