使用angularJS的Bootstrap-Tour

前端之家收集整理的这篇文章主要介绍了使用angularJS的Bootstrap-Tour前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我目前正在开展一个项目,我必须在页面显示一个游览.

我看了一下Bootstrap-Tour,看起来并不那么糟糕.我在angluarJS控制器工作.所以我创建一个Tour,添加一些步骤并创建一个按钮,在AngularJS控制器中触发StartTour()函数

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

我现在面对的是,如果我不打电话给孤儿:当我创建New Tour时,当我点击按钮时没有任何事情发生.我该如何解决这个问题?也许一些Angular人使用这个工具?后来我想把它装在一个指令里面.

解决方法

现在有一个用于Bootstrap Tour的AngularJS包装器:

https://github.com/benmarch/angular-ui-tour

你可以在这里看到现场演示和文档:

http://benmarch.github.io/angular-ui-tour/#/docs

猜你在找的Angularjs相关文章