ahmed-wagdi / angular-joyride

A lightweight joyride directive for giving tours of your AngularJs application
MIT License
17 stars 9 forks source link

Steps section wont allow for dynamically loaded array #6

Closed fxl03080 closed 7 years ago

fxl03080 commented 7 years ago

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?

fxl03080 commented 7 years ago

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