Страница состоит из двух блоков: список всех элементов и создание нового элемента. Создание нового сделал с использованием jquery.steps. Работало хорошо.
Далее добавил angular и директиву ng-switch. Angular заработал, перестал работать steps. Странность еще в том, что если сделать форму выбором по умолчанию (в скрипте selection = 'new'), то и steps начинает работать, а если по человечески, сначала список, а по нажатию на кнопку новый - ломается.
Ответ
ng-switch как и ng-if - удаляют полностью элементы из разметки, поэтому элемент form на который ты инициализируешь плагин у тебя то появляется до того как идет вызов form.steps, в этом случае до переключения switch все работает, то не появляется, в этом случае ничего не работает.
Решений может быть несолько:
отказаться от отдельного плагина jQuery и найти аналог в анугляре
поместить вызов плагина в отдельную директиву и в ней отслеживать изменения, чтобы переинициализировать плагин
в самом контроллере переинициализировать плагин с задержкой, чтобы во view успел отрисоваться нужный элемент (самый плохой вариант)
Отказаться от использования ng-if/switch и заменить их на ng-show/hide, так как данные директивы только меняют style:display, но не убирают элемент из разметки.
Если сделать директиву для тега form, то отслеживать ничего не надо, так как функция link будет вызываться каждый раз при добавлении элемента.
Пример директивы:
.directive('formSteps',function(){
return {
link: function(scope,elem){
elem.steps({
headerTag: 'h3',
bodyTag: 'fieldset',
transitionEffect: 'slideLeft'
});
}
}
})
Разметка при этом будет выглядеть так:
Комментариев нет:
Отправить комментарий