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.