Почему при использовании AngularJS перестает работать jQuery?

#jquery #angularjs

Страница состоит из двух блоков: список всех элементов и создание нового элемента.
Создание нового сделал с использованием jquery.steps. Работало хорошо.
Далее добавил angular и директиву ng-switch. Angular заработал, перестал работать
steps. Странность еще в том, что если сделать форму выбором по умолчанию (в скрипте
selection = 'new'), то и steps начинает работать, а если по человечески, сначала список,
а по нажатию на кнопку новый - ломается.



    

        

        
        
    
    

    
    




    

Ответы

Ответ 1

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'
        });
    }
  }
})


Разметка при этом будет выглядеть так:




И в коде часть 

$(function () {
    var form = $('#formwizard').show();
    form.steps({
        headerTag: 'h3',
        bodyTag: 'fieldset',
        transitionEffect: 'slideLeft'
    });
});


уже не нужна.