CODEWITHSUNDEEP
angularjsbootstrap-tour
Timsen
Timsen

Reputation: 4126

Bootstrap-Tour with angularJS

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.

Upvotes: 4

Views: 10689

Answers (3)

Eyad Farra
Eyad Farra

Reputation: 4423

See this awesome directive. (Angular TOUR directive)

Upvotes: 3

Mladen Danic
Mladen Danic

Reputation: 3667

There's an AngularJS wrapper for Bootstrap Tour now.

you can see a live demo and documentation here.

Upvotes: 4

Sajjad Khan
Sajjad Khan

Reputation: 13

1) Because you are using {.. element: "#content123" } in your steps. What it does is that it attaches the step to the given element. If your page does not have this element, this tour step will not be added as there will be nothing to which step step could get attached to. Make sure you have an element in your page with "content123" id. If you have an element with this id and it is still not working then this means that this code is being interpreted before DOM of your page loads. Try moving this code into $( document ).ready();

2) Setting orphan:true detaches the steps from any element that's why it is working.

Upvotes: 0

Related Questions