IntroJS为步骤标记添加指令

Question

我正在使用introJS来获得用户指南。 我可以显示各种功能，但是，我想在标记中添加一个指令，例如：

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

通过上面的内容，我可以看到文本“单击按钮”加上默认按钮。

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];

但是，有了以上。 console.log永远不会显示，但当我检查标记时，我可以看到：

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

如果我将指令放在我的应用程序中的任何其他位置，则console.log成功。

Answer 1

也许这可以帮到你。

我试图在这里实施@ S.Klechkovski的解决方案，但对我来说失败了。 但是让任何人都可以尝试这个。

但实际上，我在这里做了你想要的东西：

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'
    }]
  };
}

（提示是使用ng-intro-onAfterChange在那里使用适当的范围进行编译）坏的部分是我在那里对模板进行了硬编码。

但是您可以进一步将模板设置为要显示工具提示的元素的属性。 没有可能访问一个步骤的intro字段。 所以... Sory 在这里处理极端级别的编码色情内容（似乎有效）：

完整的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'
    }]
  };
}

完整的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>

注意：这是一个可怕的提示，您可能需要使用$timeout将代码包装在onIntroAfterChange 。 希望你不需要它

PS：实际上问题是我们正在使用AngularJS的IntroJS。 Libs有完全不同的方法，所以混合它们是一种痛苦。

PPS：希望有人能提供比我更好的解决方案。

PPS：最好的解决方案是使用Angular指令重写introJS

Answer 2

当Angular编译HTML模板时，会激活指令。 在这种情况下，您需要使用$ compile服务手动编译模板。 例：

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'
        }
    ]
};

Answer 3

我敢打赌，按钮不会被angular指令编译。 如果你在行上放置一个断点“element.bind（'click'，function（）{”它永远不会被命中。你能发布更多的代码，以便我们可以确定加载它的最佳方法吗？

IntroJS为步骤标记添加指令

问题描述

3 个解决方案

解决方案1
1 2016-05-16 00:09:48

解决方案2
0 2016-05-09 19:34:01

解决方案3
0 2016-05-16 13:16:38

IntroJS为步骤标记添加指令

问题描述

3 个解决方案

解决方案1 1 2016-05-16 00:09:48

解决方案2 0 2016-05-09 19:34:01

解决方案3 0 2016-05-16 13:16:38

解决方案1
1 2016-05-16 00:09:48

解决方案2
0 2016-05-09 19:34:01

解决方案3
0 2016-05-16 13:16:38