Question

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

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

通过上述内容，我可以看到文字＆＃39;点击按钮＆＃39;加上一个默认按钮。

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的解决方案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字段。所以... Sory对于极端程度的编码色情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是您可能需要使用onIntroAfterChange将代码包装在$timeout内的可怕提示。希望你不需要它

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指令编译。如果你在行上放置一个断点＆＃34; element.bind（＆＃39;点击＆＃39;，function（）{＆＃34; 它永远不会被击中。你可以发布更多的代码，以便我们确定加载它的最佳方法吗？

IntroJS为步骤标记添加指令

3 个答案: