Bootstrap-Tour with CornerJS

Question

I am currently working on a project where I should show the tour on the page.

I took a look at Bootstrap-Tour, and it was not so bad. I work in angluarJS controllers. Therefore, I create a Tour, add a few steps to it, and create a button that launches the StartTour () function in the 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 finish this thing off with a bang.",
    content: "Boom, bang, bam!"
  }
]);
// Initialize method on the Tour class. Get everything loaded up and ready to go.


$scope.StartTour = function(){
//  t.init();

    t.start(true);
    console.log(t);
    console.log("start!!");
} 

The wall I'm facing right now is that if I don't call an orphan: the truth is, when I create a new tour, nothing happens when I press the button. How do I get around this? Maybe some of the Angular people have worked with this tool? later I want to pack it into a directive.

Answer 1

AngularJS Bootstrap Tour.

.

Answer 2

. ( TOUR)

Answer 3

1) {.. element: "# content123" } . , . , , , . , "content123". , , , , DOM . $(document).ready();

2) Setting orphan: true separates steps from any element that makes it work.