WizardHandler.wizard().goTo

Question

Im using https://github.com/mgonto/angular-wizard to create an angular wizard whose steps can be called from route params:

• .../step/1
• .../step/2

etc.

So I've created this controller:

.controller('createOrganizer', ['$scope', 'WizardHandler' , '$routeParams',
    function($scope,WizardHandler,$routeParams)
    {
        //$scope.data = {};
        $step = $routeParams.step;
        WizardHandler.wizard().goTo($step);     
    }])

The proper linking and routing were created correctly on app.js and the index.html

But when I get into the urls, I get this:

TypeError: Cannot call method 'goTo' of undefined

Is this the way to pre-select an angular-wizard step using url parameters?

================= Update =====================

I tried with something like this:

.controller('createOrganizer', ['$scope', 'WizardHandler' , '$routeParams', function($scope,WizardHandler,$routeParams) { $step = $routeParams.step;

    $scope.$watch(WizardHandler.wizard(), function(step) {
            WizardHandler.wizard().goTo($step);
    });
}])

The idea is to ise watch to tell me when WizardHandler.wizard() is instantiated in order to call the .goTo method. With this controller im getting this error:

TypeError: Cannot set property 'selected' of undefined

Not sure if i am using watch correctly. I even tested the step variable and it is ok, showing the same value as the url.

================= Solved! =====================

    var step = parseInt($routeParams.step); // Important, as routeParams returns an String: the wizardHandler uses either an integer number or a string name of step. So I am parsing the number to prevent confusion.
    $scope.$watch(
    function() {return WizardHandler.wizard();}, 
    function (wizard) {
    if (wizard) wizard.goTo(step);
    });

I added an init(step) function that handles the initial values of some values i need and also prevents error caused by urls like .../step/SOMERANDOMSTRING

Thanks to GregL for your help!

Answer 1

From reading through the source code quickly, my first guess would be that you have used a <wizard> element with a name property specified, but you have not passed that same name to WizardHandler.wizard(). In the code, if you don't specify a name argument to WizardHandler.wizard(), it will use the default name, which is the name used by a <wizard> with no name attribute.

Since you are not getting back the wizard you are intending when you call WizardHandler.wizard(), it resolves to undefined and calling goTo() will fail with the error you got.

At the very least, separate the getting of the wizard and the .goTo() call to add a check in to make sure you got a valid wizard:

.controller('createOrganizer', ['$scope', 'WizardHandler' , '$routeParams',
    function($scope,WizardHandler,$routeParams)
    {
        //$scope.data = {};
        $step = $routeParams.step;
        var wizard = WizardHandler.wizard();
        if (wizard)
            wizard.goTo($step);
    }]);        

There should probably be a var keyword before that $step assignment, too, and as a convention, only Angular core things should start with a $, or jQuery selection variables.

EDIT: You could also try using a $watch() to get notified when the wizard is loaded, however there is no guarantee that the $digest() cycle will be called immediately after the wizard is loaded, so you would be relying on the assumption that the $apply/$digest cycle is run sometime after the wizard is correctly added to the WizardHandler's cache.

You would do this like so:

.controller('createOrganizer', ['$scope', 'WizardHandler' , '$routeParams',
    function($scope,WizardHandler,$routeParams)
    {
        //$scope.data = {};
        $step = $routeParams.step;
        $scope.$watch(function() {
            return WizardHandler.wizard();
        }, function (wizard) {
            if (wizard)
                wizard.goTo($step);
        });
    }]);