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