Как я могу заставить formwizard с шагами внутри директив с угловым переходом ui jquery работать?

Я пробовал сквозную передачу jquery в angular с помощью мастера форм, и он отлично работал. Однако теперь у меня возникла проблема. Передача 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>

Как я уже говорил ранее, все шаги отображаются постоянно. Я думаю, что это какая-то проблема с синхронизацией, например, директивы или включение не полностью находятся в dom, когда сквозная передача jquery пытается инициализировать мастер форм. Это то, что происходит? Если да, то должен ли я где-нибудь использовать $timeout? Если да, то куда бы я его поставил. Возможно, есть лучший способ. есть идеи?


angularjs angular-ui jquery-form-wizard
person testing123    schedule 08.11.2012    source источник
comment
Я не проверял, но я думаю, что ваша проблема может быть связана с вашим атрибутом id: id="step{{stepNumber}}" Angular предоставляет ng-атрибуты, такие как ng-href и ng-class, которые говорят ему сначала скомпилировать выражение. Я думаю, что ваша директива может получить id как "step{{stepNumber}}", а не замененную версию.   -  person Justen    schedule 09.11.2012
comment
Да, я проверил это, это на самом деле получает правильный номер.   -  person testing123    schedule 09.11.2012

Ответы (1)


arrow_upward
9
arrow_downward

Ответ: не используйте formwizard с angularJS :). Посмотрев на этот дополнительный 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.

person testing123    schedule 09.11.2012
comment
как вы загружаете атрибут src в templateUrl директивы? - person glasspill; 02.09.2013
comment
Я не уверен, что вы спрашиваете. Внутри моего шага мастера активности у меня есть ng-include, и я передаю ему атрибут src. Это помогает? - person testing123; 03.09.2013
comment
Да. я думал, вы передали значение атрибута src в templateUrl в директиве... - person glasspill; 04.09.2013