Bootstrap-Tour with angularJS

Question

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.

Answer 1

There's an AngularJS wrapper for Bootstrap Tour now.

you can see a live demo and documentation here.

Answer 2

See this awesome directive. (Angular TOUR directive)