Bootstrap-Tour with angularJS

angularjs, bootstrap-tour

Solution

There's an AngularJS wrapper for Bootstrap Tour now.

you can see a live demo and documentation here.

Problem

I am currently working on a project where I have to show a tour on the page. I took a look at Bootstrap-Tour and it was not so bad. I am working in angluarJS controllers. So I create a Tour, add some steps to it and create a button which fire off StartTour() function in AngularJS controller: ``` 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!!"); } ``` The wall I am facing right now is, that if I don't call orphan:true when I am creating New Tour nothing happens when I click the button. How do I get around this problem? Maybe some of the Angular people worked with this tool? later on, I want to pack it inside a directive.

Original source