我目前正在开展一个项目,我必须在页面上显示一个游览.
我看了一下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
你可以在这里看到现场演示和文档: