JoyRide for Single Page App

[a-samad]

I am using Joyride 2.1 in angular app and facing problem when I have two different tips on different pages, what actually happens is that the 1st tip works perfectly fine but when I switched to 2nd page I still got first tip as I differentiate bot tips with unique IDs, The problem I have found is that the content of class 'joyride-tip-guide' is not updated. Is there any method in your library that restart the binding on new page.

First Tip:

<ol id="integration_header_count2" cw-joyride data-joyride style="display: none" ng-if="commonSvc.isVistedOnboardingVisible">
    <li data-class="hdr-icon-bell" data-button="Got It" data-options="tipLocation:left">
        <h2>7 plus unread message:</h2>
        <p>This small summary section contains helpful information about your applications, projects, and teams that are
            related to this particular server. You can also navigate to a particular application, project, or team
            member via this section.</p>
    </li>
</ol>

Second Tip:

<ol id="server_detail_access" cw-joyride style="display: none" data-joyride>
    <li data-class="glb-submenu-smry-inr" data-text="Next" class="custom joyRide-step1">
        <h2>Server Summary:</h2>
        <p>You can view important details of your server at a glance here. You can use the in-line editor to change the
            label for your server. You can use the drop-down to switch to a different server. You can click on Server to
            go to the Server listing page. </p>
    </li>
    <li data-class="side-nav" data-button="Next" data-options="tipLocation:right;" class="joyRide-step2">
        <h2>Server Navigation:</h2>
        <p>This helpful left-side navigation menu provides you quick access to different features and functionality
            provided on your server.</p>
    </li>
    <li data-class="glb-fab-dial-1" data-button="Next" data-options="tipLocation:right" class="joyRide-step3">
        <h2>Server Actions:</h2>
        <p>These quick actions make it easy for you to perform a number of frequently needed actions, such as adding an
            application, stopping, restarting and cloning a server.</p>
    </li>
    <li data-class="glb-summary-rt" data-button="Got It" data-options="tipLocation:left" class="joyRide-step4">
        <h2>App/Project/Team Details:</h2>
        <p>This small summary section contains helpful information about your applications, projects, and teams that are
            related to this particular server. You can also navigate to a particular application, project, or team
            member via this section.</p>
    </li>
</ol>

I am using angular directive to trigger it on page load cw-joyride

(function(){
    'use strict';

    angular
        .module('cgConsole')
        .directive('cwJoyride', ['$timeout','consoleApiSvc','commonSvc','$rootScope',cwJoyride]);

    function cwJoyride($timeout, consoleApiSvc, commonSvc, $rootScope) {
        return function(scope, element, attributes) {
            $timeout(function(){
                console.log(element[0].id);
                $('#'+element[0].id).joyride({
                    autoStart : true,
                    'preRideCallback' : function(){
                        $('body').addClass('cw-walkthrough');
                    },
                    'postRideCallback' : function(){
                        $('body').removeClass('cw-walkthrough');
                        $rootScope.allowNavigation();
                    },
                    postStepCallback : function (index, tip) {
                        setTimeout(function(){
                            $('.joyride-expose-wrapper')
                                .removeClass('jr-wrap-step1')
                                .removeClass('jr-wrap-step2')
                                .removeClass('jr-wrap-step3')
                                .removeClass('jr-wrap-step4');

                            $('.joyride-expose-wrapper')
                                .addClass('jr-wrap-step' + index);
                        },0);
                    },
                    preStepCallback : function (index, tip) {
                        $('.fab-menu-wrapper').removeClass('fab-menu-show');

                        if (index == 2) {
                            $('.fab-menu-wrapper').addClass('fab-menu-show');
                        }
                    },
                    modal:true,
                    expose: true
                });
            },2000);

        }
    }

})();