我们想在我们的 SPA 上使用引导程序游览脚本 ( http://bootstraptour.com )。
由于我们想要浏览多个页面(这是可能的),我将游览放入 中,rootScope
并定义了一些函数来开始游览。我的想法rootScope
是始终可以在应用程序中使用,因此始终可以访问游览。
显示了第一步,但是当我想更进一步时,重定向后游览会停止。所以用户在下一页但没有游览......
由于我们在游览中使用角度转换,我们不能将游览放在单独的文件中以加载外部角度。
这是一个旅游的代码,(我们有 4 个不同的旅游)放在rootScope
. 为了可读性,我删除了一些步骤。
所以在这段代码中,游览在第 3 步之后停止,但它从第 4 步开始转发到路径
var generalTour = new Tour({
debug: true,
name: "GeneralTour",
storage: window.localStorage,
steps: [
{ //1
element: '#generalTourHome',
title: $filter('translate')('START_WITH_PRISMANOTE'),
content: $filter('translate')('GENERALTOUR_WELCOME'),
path: '/retailer/home'
},
{ //2
element: '#generalTourMyShopMenu',
title: $filter('translate')('MORE_SHOPS'),
content: $filter('translate')('HERE_YOU_WILL_FIND_YOUR_SHOPS'),
path: '/retailer/home'
},
{ //3
element: '#generalTourMyShopIcon',
title: $filter('translate')('SHOP_DATA'),
content: $filter('translate')('CLICK_ON_SHOP_ICON'),
path: '/retailer/home'
},
{ //4
element: '#generalTourFillInInformation',
title: $filter('translate')('FILL_IN_DATA'),
content: $filter('translate')('FILL_IN_YOUR_DATA'),
path: '/retailer/shop'
},
{ //5
element: '#generalTourBrands',
title: $filter('translate')('SHOP_BRANDS'),
content: $filter('translate')('INDICATE_WHICH_BRANDS_YOU_ARE_USING'),
path: '/retailer/shop'
},
]
});
$rootScope.startGeneralTour = function(){
generalTour.init();
generalTour.start(true);
generalTour.restart();
}