IntroJS 将指令添加到步骤标记答案

【问题标题】：IntroJS Add Directive To Step MarkupIntroJS 将指令添加到步骤标记
【发布时间】：2016-08-31 12:41:35
【问题描述】：

我正在使用 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 是成功的。

【问题讨论】：

你能把这个放在 Codepen 里吗？

标签： javascript angularjs angularjs-directive angular-directive intro.js

【解决方案1】：

也许这对你有帮助。

我尝试实施@S.Klechkovski 的解决方案here，但对我来说失败了。但是让任何人都可以尝试一下。

但实际上，我已经做了你想要的东西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'
    }]
  };
}

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

但您可以更进一步，将模板设置为要在其上显示工具提示的元素的属性。无法访问步骤的intro 字段。所以...对不起，编码色情的极端水平here（它似乎正在工作）：

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

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

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

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

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

【讨论】：

【解决方案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'
        }
    ]
};

【讨论】：

谢谢，但是如何在控制器中使用 $compile 呢？ $scope.IntroOptions 在 Angular 控制器中是不受欢迎的。
$compile 是一项服务，也可以注入到控制器中，但如果您遵循最佳实践，您会将其包装在指令中。
感谢您的信息。如果您可以提供在控制器中使用 $compile 的示例，我很乐意接受。我的意思不是指令中的控制器。
这取决于您决定在哪里实现逻辑。我已经建议在指令中这样做。干杯！

【解决方案3】：

我敢打赌，该按钮没有被 angular 指令编译。如果你在 "element.bind('click', function() {" 行上放一个断点它永远不会被击中。您能否发布更多代码，以便我们确定加载它的最佳方式？

【讨论】：