使用 angularJS 的 Bootstrap-Tour答案

【问题标题】：Bootstrap-Tour with angularJS使用 angularJS 的 Bootstrap-Tour
【发布时间】：2019-04-05 15:11:39
【问题描述】：

我目前正在做一个项目，我必须在页面上显示一个游览。

我查看了 Bootstrap-Tour 并没有那么糟糕。我在 angluarJS 控制器中工作。所以我创建了一个 Tour，向其中添加了一些步骤，并创建了一个在 AngularJS 控制器中触发 StartTour() 函数的按钮：

var t = new Tour({container: "#main",
    backdrop: false,
    debug:true,
    orphan: true
});

t.addStep({
    element: "#content123",
    title: "Title123",
    content: "Content123"
});

t.addSteps(
        [
  {
    element: ".message.message-1", // element selector to show the popover next to;
    title: "Welcome to my tour!",
    content: "We're going to make this quick and useful."
  },
  {
    element: ".message.message-2",
    title: "Let's finish this thing off with a bang.",
    content: "Boom, bang, bam!"
  }
]);
// Initialize method on the Tour class. Get's everything loaded up and ready to go.


$scope.StartTour = function(){
//  t.init();

    t.start(true);
    console.log(t);
    console.log("start!!");
}

我现在面临的问题是，如果我在创建 New Tour 时不调用 orphan:true，则单击按钮时不会发生任何事情。我该如何解决这个问题？也许一些 Angular 的人使用过这个工具？稍后，我想将它打包在一个指令中。

【问题讨论】：

标签： angularjs bootstrap-tour

【解决方案1】：

现在有一个 AngularJS wrapper 用于 Bootstrap Tour。

您可以看到现场演示和文档here。

【讨论】：

【解决方案2】：

See this awesome directive。（Angular TOUR 指令）

【讨论】：

它没有那么棒，因为它没有提供覆盖和突出显示功能。
还有一些缺陷......如果我们使用引导选项卡，位置不合适

【解决方案3】：

1) 因为您在步骤中使用了 {.. element: "#content123" }。它的作用是将步骤附加到给定元素。如果您的页面没有此元素，则不会添加此游览步骤，因为没有任何内容可以附加到该步骤步骤。确保您的页面中有一个带有“content123”id 的元素。如果你有一个带有这个 id 的元素并且它仍然不能工作，那么这意味着这个代码在你的页面的 DOM 加载之前被解释了。尝试将此代码移动到 $( document ).ready();

2) 设置 orphan:true 将步骤与任何元素分离，这就是它工作的原因。

【讨论】：