使用angularJS的引导之旅

我目前正在进行一个项目，我必须在页面上显示一个教程

我看了一下Bootstrap巡回赛，感觉还不错。我在英国工作。因此，我创建了一个巡更，添加了一些步骤，并创建了一个按钮，在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!!");
} 

我现在面临的问题是，如果我不称之为孤儿：当我创建新的巡演时，当我点击按钮时，什么都不会发生。我该如何避开这个问题？也许有些棱角分明的人用过这个工具？稍后，我想将其打包到一个指令中

。（角度巡更指令）

现在有一个引导巡更

您可以看到一个实时演示和文档。

1），因为您在步骤中使用了{..element:#content123}。它所做的是将步骤附加到给定元素。如果您的页面没有此元素，则不会添加此巡更步骤，因为该步骤不会附加到任何内容。确保您的页面中有一个id为“content123”的元素。如果您有一个id为“content123”的元素，但它仍然不工作，则这意味着在加载页面的DOM之前正在解释此代码。尝试将此代码移动到$（document.ready（）

---

2） 设置孤立：true会将步骤从任何元素中分离出来，这就是它工作的原因。

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