It seems not working well when content is inside a template

[gudh]

It seems not working well when content is inside a template

That is, content is pull in using ngView, ngInclude directive. And intro.js text just show in the middle of the page instead of pointing to the element.

[houli]

Having the same issue loading a template in with a directive. The document.querySelector() call gets back null as the template has not yet loaded in. Calling document.querySelector() in the JS console will get back the element I want so I assume this has to do with the timing of getting the element.

[deloschang]

Same issue using a directive with a template. Any ideas?

[manwaring]

bump? please?

[manwaring]

Actually just found a (somewhat unsatisfactory) resolution to this, hopefully it can help someone else. It seems to be related to issue #48. The code I put in sets a timeout before calling the init function, and inside the timeout (before the init call) I load the steps like so:

setTimeout(function(){
      $scope.introOptions.steps = [
        {
          element : document.querySelector('#1'),
          intro : 'blah blah',
          position : 'left'
        },
        {
          element : document.querySelector('#2'),
          intro : 'blah blah',
          position : 'left'
        },
        {
          element : document.querySelector('#3'),
          intro : 'blah blah',
          position : 'left'
        },
        {
            element : document.querySelector('#4'),
            intro : 'blah blah',
            position : 'left'
          },];
      $scope.introOptions.start();
    }, 1000);

[CrouseMatthew]

I was able to solve this issue by putting the directive in the parent index.html file and using the CallMe() callback

directive

<div ng-controller="IntroController">
    <div ng-intro-options="IntroOptions"  ng-intro-method="CallMe"
         ng-intro-autostart="ShouldAutoStart"
         ng-intro-autorefresh="true"></div>
    <div ng-view id='introStep-2'></div>
</div>

end of controller

$scope.ShouldAutoStart = false;
$timeout(function(){$scope.CallMe()},1000);

[RohanPrabhuNomadly]

A solution that worked for us, but will need to be tweaked for others (YMMV). If you need to put a tooltip on a particular selector say "#selector", then you need to change/modify the introOptions when that element becomes available, so what you can do is:

$scope.$watch(function() {
    return $("#selector").length;
}, function() {
    $scope.introOptions.steps = [
    {
        element: document.querySelector("#selector"),
        intro: '
    }
});

Obviously you rarely ever need it over a single element, so you will need to use a $watchGroup and do it accordingly, or in the watch expression, you can add a boolean expression over the presence of elements:

$scope.$watch(function() {
   return ($("#selector1").length == 1) && $("#selector2").length == 2);
}, function() { ... });

Do note that, none of this will work if autostart is set to true. You will need to trigger the CallMe function (or whatever), from the aggregated watch function.

[amiltonpaglia]

Thank you @RohanPrabhuNomadly! Your answer just solved all my problems with loading the steps on the right timing. 🙏