IntroJS Add Directive To Step Markup

Question

I am using introJS to have a user guide. I can show various features, however, i want to add a directive to the markup e.g:

$scope.IntroOptions = {
    steps: [
        {
            element: "#step1",
            intro: "Click the button: <button my-directive>Test Directive</button>",
            position: 'left'
        }
    ],

With the above, i can see the text 'Click the button' plus a default button.

myDirective.js

var myDirective = function () {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.bind('click', function() {
                    console.log('you clicked the directive');
                });
            }
        };
    };

return [myDirective];

However, with the above. The console.log is never displayed, yet when i inspect the markup, i can see:

<button my-directive>Test Directive</button>

If i place the directive any where else in my application, the console.log is successful.

Can you put this in a Codepen please? – Mike Feltman May 09 '16 at 18:04 — Mike Feltman, May 09 '16 at 18:04

Igor Tsvetkoff · Answer 1 · 2016-05-16T00:15:15.027

Maybe this can help you.

I've tried to implement @S.Klechkovski's solution here, it failed for me. But let anyone experiment with this.

But actually, I've made something you want here:

function appCtrl($scope, $compile) {

  function onIntroAfterChange(targetElement, scope) {

    angular.element(document.querySelector(".introjs-tooltiptext"))
      .append($compile(
          angular.element(
            "<button my-directive>Test Directive</button>"))
        (scope)).html()
  }

  $scope.onIntroAfterChange = onIntroAfterChange;

  $scope.IntroOptions = {
    steps: [{
      element: "#step1",
      intro: "Click the button:",
      position: 'bottom'
    }]
  };
}

(the hint is to use ng-intro-onAfterChange to compile there using proper scope) The bad part is that I've hard-coded the template there.

But you can go further and set the template as an attribute of the element you want to show tooltip on. Had no possibility to access intro field of a step. So... Sory for that extreme level of coding pornography here (it seems to be working):

Full JS:

angular.module("app", ["angular-intro"])
  .directive("myDirective", myDirective)
  .controller("appController", appCtrl);

function myDirective() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.bind('click', function() {
        console.log('you clicked the directive');
      });
    }
  };
};



function appCtrl($scope, $compile) {

  function onIntroAfterChange(targetElement, scope) {
    angular.element(document.querySelector(".introjs-tooltiptext"))
      .append($compile(
          angular.element(targetElement).attr("data-template"))
        (scope)).html()
  }

  $scope.onIntroAfterChange = onIntroAfterChange;

  $scope.IntroOptions = {
    steps: [{
      element: "#step1",
      intro: "Click the button:",
      position: 'bottom'
    }]
  };
}

Full HTML

<body ng-app="app" ng-controller="appController">
  <div ng-intro-options="IntroOptions" ng-intro-autostart="true" ng-intro-onafterchange="onIntroAfterChange">
    <p id="step1" data-template="<button my-directive>Test Directive</button>">
      Text
    </p>
    <button my-directive>Test Directive</button>

Note: here is the scary tip that you might need to wrap the code inside the onIntroAfterChange with $timeout. Hope you won't need it

PS: Actually the problem is that we are using IntroJS from AngularJS. Libs have completely different approaches, so mixing them is a pain.

PPS: Hope someone could provide better solution than I did.

PPS: The best solution is too rewrite introJS using Angular directives

score 0 · Answer 2 · answered May 09 '16 at 19:34

0

Directives are activated when Angular compiles the HTML templates. In this case you need to manually compile the template using the $compile service. Example:

var elementToString = function (element) {
    var container = angular.element('p').append(angular.element(element));
    return container.html();
}

var introTemplate = 'Click the button: <button my-directive>Test Directive</button>';
var introContent = $compile(introTemplate)($scope);

$scope.IntroOptions = {
    steps: [
        {
            element: "#step1",
            intro: elementToString(introContent),
            position: 'left'
        }
    ]
};

answered May 09 '16 at 19:34

S.Klechkovski

4,005
16
27

thanks, but how do you use $compile in a controller? $scope.IntroOptions is defiend in Angular Controllers. – Oam Psy May 13 '16 at 17:57
1

$compile is a service and can be injected also in controllers, but if you follow the best practices you will wrap this in a directive. – S.Klechkovski May 13 '16 at 18:00
Thanks for the info. If you can provide an example of $compile being used in a controller, im happy to accept. And by this, i dont mean a controller within a directive. – Oam Psy May 13 '16 at 18:10
That's up to you where you will decide to implement the logic. I've already recommended to do that in a directive. Cheers! – S.Klechkovski May 13 '16 at 18:13

score 0 · Answer 3 · answered May 16 '16 at 13:16

I bet that the button isn't getting compiled by the angular directive. If you put a breakpoint on the line "element.bind('click', function() {" it would never be hit. Can you post more of the code so that we can determine the best way to make it load?

IntroJS Add Directive To Step Markup

3 Answers3