3

I have tried the jquery passthrough in angular with the form wizard and it worked great. Now, however I am having an issue. The jquery passthrough doesn't seem to work when the steps in the formwizard are inside directives (all the steps display instead of just showing you the first one):

<form ui-jq="formwizard" ui-options="{formPluginEnabled: false, validationEnabled: false, focusFirstInput : false,  disableUIStyles : true}" ng-submit="create(currentActivity, selectedCategories)" class="main">
                    <!--STEP 1 -->             
                    <div activity-wizard-step title="Class Activity Info" description="Add all info about the activity" src="resources/angular/templates/activity_wizard/activity_info.html" step-number="1"></div>

                    <!-- STEP 2 -->
                    <div activity-wizard-step title="Add Class(es)" description="dd Instructor-Led-Training (ILT) Classes below. It can be a classroom ILT or a Webinar ILT and contain 1 or more sessions." src="resources/angular/templates/activity_wizard/add_class.html" step-number="2"></div>

</form>

Here is what my activityWizardStep directive looks like:

directivesModule.directive('activityWizardStep', function () {
    return {
        replace: true,
        restrict: 'AE',
        scope: {
            title: '@',
            description: '@',
            src: '@',
            stepNumber: '@'
        },
        templateUrl: 'resources/angular/templates/activity_wizard/wizard_step.html'
    }
});

and wizard_step.html:

<fieldset class="step" id="step{{stepNumber}}">
    Some html
</fieldset>

Like I said earlier, all the steps display all the time. I am thinking this is some kind of timing issue, like the directives or the include isn't in the dom fully when the jquery passthrough tries to initialize the formwizard. Is this what is happening? If so, should I use a $timeout somehwere? If so, where would I put it. Perhaps there is a better way. Any thoughts?

testing123
  • 11,367
  • 10
  • 47
  • 61
  • I haven't tested, but I think your problem might be with your `id` attribute: `id="step{{stepNumber}}"` Angular provides ng-attributes like `ng-href` and `ng-class` that tell it to compile the expression first. I think your directive might be getting the `id` as `"step{{stepNumber}}"` as opposed to the replaced version – Justen Nov 08 '12 at 22:11
  • Yeah, I checked that, it is actually getting the right number. – testing123 Nov 09 '12 at 12:35

1 Answers1

9

The answer is, don't use the formwizard with angularJS :). After looking at this further ng-switch not only does the job, it simplifies a lot of stuff. 

<form ng-switch="navStep" class="main">
    <!--STEP 1 -->             
    <div ng-switch-when="activity_info" activity-wizard-step title="Class Activity Info" description="Add all info about the activity" src="resources/angular/templates/activity_wizard/activity_info.html" step-number="1"></div>

    <!-- STEP 2 -->
    <div ng-switch-when="add_class" activity-wizard-step title="Add Class(es)" description="dd Instructor-Led-Training (ILT) Classes below. It can be a classroom ILT or a Webinar ILT and contain 1 or more sessions." src="resources/angular/templates/activity_wizard/add_class.html" step-number="2"></div>

</form>

Then in the set the navStep when the next and back buttons are clicked.

Basically the awesomeness of angular makes the formwizard unnecessary.

testing123
  • 11,367
  • 10
  • 47
  • 61