3

フォームウィザードを使用して角度でjqueryパススルーを試してみましたが、うまくいきました。しかし今、私は問題を抱えています。フォームウィザードのステップがディレクティブ内にある場合、jquery パススルーが機能しないようです (最初のステップだけではなく、すべてのステップが表示されます)。

<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>

私の activityWizardStep ディレクティブは次のようになります。

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

そして、wizard_step.html:

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

前述したように、すべてのステップが常に表示されます。jqueryパススルーがフォームウィザードを初期化しようとしたときに、ディレクティブやインクルードがDOMに完全にないなど、これはある種のタイミングの問題だと考えています。これは何が起こっているのですか？もしそうなら、私は $timeout を使用する必要がありますか? もしそうなら、どこに置きますか。おそらくもっと良い方法があります。何かご意見は？

4

1 に答える 1

9

答えは、angularJS で formwizard を使用しないことです :)。このさらなる ng-switch を見た後、仕事をするだけでなく、多くのことを簡素化します。

<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>

次に、次のボタンと戻るボタンがクリックされたときの navStep を設定します。

基本的にAngularの素晴らしさはformwizardを不要にします。

于 2012-11-09T12:44:55.483 に答える