Adding Wizard steps dynamically

Question

I am using Angular-Wizard from (https://github.com/mgonto/angular-wizard/). It works pretty good. Though now, in my next case I need to add steps or wizard dynamically. Basically I have a JSON data that I fetch from Database, and based on it, I want to create Wizard with dynamica number of steps. On completion of those step, I need to do some math and maybe need to create more steps or another wizard whatever works fine.

The problem is:

1. This is my first project with angularJs.
2. I still didn't get how to write much of this code. Though I am able to use it wizard in couple of location before.

So, I am not able to modify this wizard or get it working with steps. I try few things, like

1. trying to use wizard controller's addstep function, but not getting what object type it is expecting.
2. I try to add complete wizard HTML through Javascript string and my Controller's function then bind it on page using ng-bind-html function. Though it give error and hence didn't work.

Here is my custom Controller class

angular.module('ClientScoring', ['mgo-angular-wizard'])
.controller('ScoringController', function ($scope, WizardHandler) {
   $scope.errormessage = "";
   $scope.isLoaded = false;
   $scope.Load = function () {
       if ($scope.isLoaded == false) {
           $scope.isLoaded = true;
           console.log(" Loading ...");
       }
   };
   $scope.getQuestion = function () {
       $scope.Load();
       console.log(" Loading done?");
       if ($scope.isLoaded == true) {

           var HTML = 
                '<wz-step title="1">' +
                '<div class="question">Please choose one:</div>'+
                '<div class="answer"></div>'+
                '<input type="button" value="Skip &raquo;" wz-next />'+
                '<input type="button" value="Submit" class="mainbutton" /></wz-step>';
           WizardHandler.addStep(HTML);
           return "";
       } else {
           return "Fail to load questions";
       }
   };
});

Indeed this is one of version I currently have. Any suggestion is appreciated. Thanks.

Answer 1

This works for me : Compiling dynamic HTML strings from database

It basically is that I create a Directive that is bind to one variable that compile my wizard code dynamically and then attach to page.