2014-02-18 1 views
4

В настоящее время я работаю над проектом, где мне нужно показать тур на странице.Bootstrap-Tour с angularJS

Я взглянул на Bootstrap-Tour, и это выглядело не так уж плохо. Я работаю в контроллерах angluarJS. Поэтому я создать тур, добавить несколько шагов к нему и создать кнопку, которая выпалить StartTour() функции в контроллере AngularJS:

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!!"); 
} 

Стенка я столкнулся прямо сейчас, что если я не называю сиротой: истинный когда я создаю новый тур, ничего не происходит, когда я нажимаю кнопку. Как мне обойти эту проблему? Может быть, некоторые из Угловых людей работали с этим инструментом? позже я хочу упаковать его внутри директивы.

ответ

3

См. Эту удивительную директиву. (Угловая TOUR директива)

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

+6

Это не так уж и страшно, поскольку он не обеспечивает наложение и подсветку функциональности. – vonwolf

+0

И с парой дефектов .. позиция не подходит, если мы используем вкладки начальной загрузки –

0

1) Поскольку вы используете {.. element: "# content123"} в своих шагах. Он делает то, что он прикрепляет шаг к данному элементу. Если ваша страница не имеет этого элемента, этот шаг тура не будет добавлен, так как не будет никакого шага, к которому может быть присоединен шаг шага. Убедитесь, что у вас есть элемент на вашей странице с идентификатором «content123». Если у вас есть элемент с этим идентификатором, и он все еще не работает, это означает, что этот код интерпретируется до того, как DOM загружает вашу страницу. Попробуйте переместить этот код в $ (document) .ready();

2) Установка сирота: true отделяет шаги от любого элемента, поэтому он работает.