Question

我目前正在开展一个项目，我必须在页面上进行巡视。

我看了一下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时，当我点击按钮时没有任何反应。我该如何解决这个问题？也许一些Angular人使用过这个工具？稍后，我想将它打包在一个指令中。

Answer 1

现在有一个AngularJS wrapper的Bootstrap Tour。

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

Answer 2

See this awesome directive。（Angular TOUR指令）

Answer 3

1）因为你正在使用{..元素：＆＃34; #content123＆＃34;在你的步骤。它的作用是将步骤附加到给定元素。如果您的页面没有此元素，则不会添加此游览步骤，因为没有任何步骤可以附加到步骤。确保页面中有一个元素，其中包含＆＃34; content123＆＃34; ID。如果你有一个带有这个id的元素并且它仍然无法工作，那么这意味着在加载页面的DOM之前解释此代码。尝试将此代码移动到$（document）.ready（）;

2）设置orphan：true将步骤与任何元素的步骤分开。

使用angularJS的Bootstrap-Tour

3 个答案: