Intro js not working when using templateURL elements

[udarts]

Hi there, let me try to explain what is happening.

The website I am trying to get introjs to work on, is using 3 different elements, which are rendered using the templateURL, for example:

The content for those elements are being added by angular inside the correct element. I tried all the instructions here, but the ng-click on the anchor tag is not firing intro.

When I copied and past the html manually between the topbar (where the anchor tag is), the CallMe is being fired and works.

Is there a workaround when using "dynamic content"?

Cheers, Stephan

[millerscout]

Hello o/

i got this example working: http://plnkr.co/edit/BeOD9H

there's two things that may be the problem, one is that there's no element being rendered with templateurl, so make sure you're creating steps, using only the selector like:

{
            element: document.querySelector('#step1'), ///this may be the problem
            intro: "This is the first tooltip."
        },
        {
            element: document.querySelectorAll('#step2')[0], ///this may be the problem
            intro: "<strong>You</strong> can also <em>include</em> HTML",
            position: 'right'
        },
        {
            element: '#step3', // this works preety well when this problem happens, because the DOM is searched when introJs starts
            intro: 'More features, more fun.',
            position: 'left'
        },
        {
            element: '#step4',
            intro: "Another step.",
            position: 'bottom'
        },
        {
            element: '#step5',
            intro: 'Get it, use it.'
        }

the other problem may be the CallMe that is not in the same context: you have alot of ways of fixing that, personally i prefer using the ngIntroService because is simpler.

you may inject that on your controller like:

var app = angular.module('myApp', [
  'angular-intro'
  ])
.controller('MyController', function (ngIntroService)  {

$scope.startIntro = function(){
ngIntroService.start(); /// the ngIntroService have the same context with directive so both work together without issue 
}
})

if that doesn't help you tell me :)

i'll be waiting for your feedback

Cheers!

[udarts]

HI there, thanks for your reply.

I think I've got it working, I just used the "static html" for the topbar where the anchor tag is, and now it is firing CallMe.

One question though (sorry not related to this issue). Is there a way to have a dropdown with the 'visible' steps or to know which steps are visible to be put in a dropdown for easier step selection?

Cheers,

[millerscout]

oh good :)

and yeah, there is, as steps itself is an array you may have a service with all steps you need, and configure when they'll be available.

when someone changes the dropdown value you may push/splice as needed after that just need to refresh the component.

Cheers :)

[udarts]

Hi Millerscout,

I have to get back on my comment. When I am using the static html for the topbar, the topbar is shown on every page, even where it shouldn't (some popups, etc), it happens because I am using the ui-view to add content. The example you showed me, was using some static html (like the buttons that start intro), but some pages are loaded with templateUrl. In my case even the button that starts intro is loaded via templateUrl. And now it won't work. So the start button needs to actually work with dynamic loading.

[udarts]

Any idea on this?