Cannot read property 'beforeStep' / 'afterStep' of undefined

[edarioq]

When the joyride is finished, and I click the button that starts it again, I get Cannot read property 'beforeStep' of undefined and Cannot read property 'afterStep' of undefined. Example code:

$scope.startJoyRide = function() {
    joyride.start = true;
    if ($scope.step1) {
        joyride.config = {
            steps: [
                {
                    type: 'element',
                    selector: '#div-1',
                    content: 'Some text.',
                    placement: 'left'
                },
                {
                    type: 'element',
                    selector: '#div-2',
                    content: 'Some text.',
                    placement: 'left'
                },
                {
                    type: 'element',
                    selector: '#div-3',
                    content: 'Some text.',
                    placement: 'left'
                    },
                {
                    type: 'element',
                    selector: '#div-4',
                    content: 'Some text.',
                    placement: 'left'
                }
            ]
        };

        if ($scope.step2) {
        joyride.config = {
            steps: [
                {
                    type: 'element',
                    selector: '#div-1',
                    content: 'Some text.',
                    placement: 'left'
                },
                {
                    type: 'element',
                    selector: '#div-2',
                    content: 'Some text.',
                    placement: 'left'
                },
                {
                    type: 'element',
                    selector: '#div-3',
                    content: 'Some text.',
                    placement: 'left'
                },
                {
                    type: 'element',
                    selector: '#div-4',
                    content: 'Some text.',
                    placement: 'left'
                }
            ]
        };
    joyride.config.template = './views/modules/admin/joyride.html';
}

[edarioq]

Perhaps the issue is with current: -1 in the joyride object. Not sure why there is a -1 as current. It only happens after clicking next slide too. If I launch the joyride and click "Done" instead, it never goes a step, therefore current is still 0.

[edarioq]

I fixed by opening the source file joyride.js and changing the function afterTransition to the following:

            if (scope.joyride.transitionStep == 'next') {
              scope.joyride.current++;
            }
            else {
              if (scope.joyride.current > 0) {
                scope.joyride.current--;
              }
            }

This way scope.joyride.current-- won't ever be a negative number, hope this helps someone, or should I open a PR?

[edarioq]

PR: https://github.com/ahmed-wagdi/angular-joyride/pull/21

[ahmed-wagdi]

Hey @edarioq sorry for the late reply.

I'm having trouble recreating this, based on the code you posted above: https://next.plnkr.co/edit/lbnsbshEC46w7aWr

I had to make some changes because i dont know what your template contains or how $scope.step1 is set. It would be helpful if you could change the plnkr i posted above to better reflect the problem you were having.