Bootstrap-Tour与angularJS集成

Question

我目前正在处理一个项目，需要在页面上展示一个导览。

我看了一下Bootstrap-Tour，感觉还不错。我正在使用angularJS控制器进行开发。所以我创建了一个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!!");
} 

我现在面对的问题是，如果我在创建新的旅游时不调用orphan:true，当我点击按钮时什么都不会发生。我该如何解决这个问题？也许一些Angular的人已经使用过这个工具了？以后，我想将其打包到指令中。

- Timsen

Answer 1

现在有一个AngularJS包装器适用于Bootstrap Tour。

您可以在这里查看实时演示和文档。

- Mladen Danic

Answer 2

看看这个很棒的指令。（Angular TOUR 指令）

- Eyad Farra

---

由于它没有提供覆盖和突出显示功能，所以它并不是那么棒。 - vonwolf

而且还有一些缺陷...如果我们使用Bootstrap选项卡，位置就不正确。 - Siva Kumar

Answer 3

1) 因为你在步骤中使用了{.. element: "#content123"}，它的作用是将步骤附加到给定的元素上。如果你的页面没有这个元素，这个导览步骤将不会被添加，因为没有东西可以连接到这个步骤。请确保你的页面中有一个带有 "content123" id 的元素。如果你已经有一个具有这个 id 的元素，但它仍然无法工作，那么说明这段代码在页面加载之前被解释执行了。尝试将这段代码移到 $( document ).ready(); 中。

2) 将 orphan:true 设置为 true 可以将步骤与任何元素分离，所以它可以正常工作。

- Sajjad Khan