Use ng-click inside intro injected html about angular-intro.js

[rodrigovallades]

Same question, anyone?

I imagine that the HTML has to be compiled before being injected, using $compile, but I can't make it work.

@ahmedhawas did you manage do solve this?

[DURK]

Same here. Does anyone know a workaround? I'd like to use a directive inside the template of a step.

[DURK]

@rodrigovallades @ahmedhawas I got it figured out using $compile!

First, define a callback on your ng-intro directive that's triggered when changing steps.

ng-intro-options="introOptions" ng-intro-onafterchange="onIntroAfterChange"

Second, configure the callback to compile the contents of the introjs-tooltip element. In my case, I've added a class 'compile' so I only compile the steps that need compiling.

$scope.onIntroAfterChange = function () {
    $timeout(function () {
        var el = angular.element('.introjs-tooltip');
        if (el.hasClass('compile')) {
            $compile(el.contents())($scope);
        }
    }, 500);
};

Note: even though it's triggered after a change, I needed a timeout to ensure the new step was rendered on the DOM.

Now you can add angular directives to the html of your steps, like an ng-click

{
    intro: '<button ng-click="onClick()">Click me</button>',
    tooltipClass : 'some-class compile'
}

Finally, the following method should be triggered!

$scope.onClick = function () {
    // great success!
}

[rodrigovallades]

Great, @DURK ! Thanks for the reply!

[pavlokitdev]

@DURK First of all - thanks for your solution.
I have one question: can we omit usage of $timeout for 500ms somehow?

[DURK]

I haven't figured that out yet. I'll look into that when I get the chance.