Question

我们希望在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();
}

Answer 1

似乎您在两个页面上都在开始并重新启动巡回赛。您应该在/retailer/shop页面上放置一个条件，如果游览需要继续，请不要重新开始：

$rootScope.startGeneralTour = function(){

    generalTour.init();

    if( some_function__is_page( '/retailer/shop' ) && !generalTour.ended() ){
        generalTour.start(true);
    } else {
        generalTour.restart();
    }
}

如果您也想继续浏览/retailer/shop页面上的情况，那么在用户没有真正结束漫游但又不想继续浏览的情况下，可以跳过检查是否在/retailer/home页面上例如，他刷新了页面。

多个页面上的Bootstrap游览在其他页面上停止

1 个答案: