Bootstrap-Tour with angularJS

Question

我目前正在進行一個項目，在那裏我必須在頁面上顯示一個巡視。

我看了一下Bootstrap-Tour，看起來並不那麼糟糕。我在angluarJS控制器工作。所以，我創建了一個巡迴賽，增加一些步驟，並創建）在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!!"); 
} 

牆我面對現在的問題是，是叫孤兒，如果我不：真當我創建新遊覽時沒有任何事情發生，當我點擊按鈕。我如何解決這個問題？也許一些Angular人使用這個工具？後來我想把它包裝在指令中。

Answer 1

有用於引導旅遊的AngularJS包裝現在：

https://github.com/benmarch/angular-ui-tour

你可以看到現場演示和文檔在這裏：

http://benmarch.github.io/angular-ui-tour/#/docs

Answer 2

看到這個真棒指令。 （角TOUR指令）

http://daftmonk.github.io/angular-tour/

Answer 3

1）因爲您在步驟中使用了{.. element：「＃content123」}。它所做的是將步驟附加到給定元素。如果您的網頁沒有此元素，則不會添加此巡視步驟，因爲沒有任何步驟可以附加到該步驟。確保您的頁面中包含「content123」ID的元素。如果你有一個帶有這個id的元素，但它仍然不起作用，那麼這意味着這個代碼在你的頁面的DOM加載之前被解釋。嘗試將此代碼移入$（document）.ready（）;

2）設置孤立：真從任何元素分離的步驟，因此它的工作原理。