ahmed-wagdi/angular-joyride

Steps section wont allow for dynamically loaded array

Closed this issue · 1 comments

Hi,
I have a dynamically loaded array based on user permissions that would define the steps in the joyride. When I try to pass that array into the configuration, it doesn't work. The only error I am receiving in the console is:
TypeError: Cannot read property 'beforeStep' of undefined
at joyride.min.js:1
at angular.js:16383
at m.$eval (angular.js:17682)
at m.$digest (angular.js:17495)
at m.$apply (angular.js:17790)
at l (angular.js:11831)
at J (angular.js:12033)
at XMLHttpRequest.t.onload (angular.js:11966)

This is my code:

$scope.viewableSteps = [];
// ****
permissions.canView({component: '', userRoleNot:[{role: '', observer: false}]}).then(function (canViewAction) {
if(canViewAction){
$scope.viewableSteps.push(
{
type: 'element',
selector: '#',
title: '
',
content: '',
placement: 'right',
scroll: false,
appendToBody: false,
beforeStep: ''
},
{
type: 'element',
selector: '#
',
title: '',
content: '
',
placement: 'right',
scroll: false,
appendToBody: false,
beforeStep: ''

      }
  );
}

});

permissions.canView({component: '', userRoleNot:[{role: '', observer: false}]}).then(function (canViewInfo) {
if(canViewInfo){
$scope.viewableSteps.push(
{
type: 'element',
selector: '#',
title: '
',
content: '',
placement: 'right',
scroll: false
},
{
type: 'element',
selector: '#
',
title: '',
content: '
',
placement: 'right',
scroll: false
}
);
}
});

permissions.canView({component: '', userRoleNot:[{role: '', observer: false}]}).then(function (canViewComm) {
if(canViewComm){
$scope.viewableSteps.push(
{
type: 'element',
selector: '#',
title: '
',
content: '',
placement: 'right',
scroll: false
},
{
type: 'element',
selector: '#
',
title: '',
content: '
',
placement: 'left',
scroll: false
}
);
}
});

var joyride = joyrideService;
joyride.start = true;
joyride.config = {
overlay: true,
onStepChange: function() {
//CODE GOES HERE
},
onStart: function() {
//CODE GOES HERE
},
onFinish: function() {
//CODE GOES HERE
},

steps: $scope.viewableSteps

};

function testFunc(resume){
console.log('testing');
resume();
}

//END CODE

Can you please inform me if I am doing something wrong?

After further investigation, it was the fact of using the placement attribute was causing me not to see the bubbles.