4

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

我看了一下 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 的人使用过这个工具？稍后，我想将它打包在一个指令中。

4

3 回答 3

4

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

您可以在此处查看现场演示和文档。

于 2014-12-22T13:03:26.050 回答
3

看到这个很棒的指令。（角度 TOUR 指令）

于 2014-05-12T08:11:22.153 回答
0

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

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

于 2016-02-23T12:59:14.443 回答