Конфликт jQuery скрипта и AngularJS
 

Добрый день. Я еще относительно новичок в JS и AngularJS и столкнулся на первый взгляд с банальной проблемой.

Есть AngularJS модуль, который отвечает за получение данных с JSON-а и записывает их в объект $Scope. Впоследствии, через ng-Repeat я подгружаю эти данные на HTML страницу.

Вроде бы все норм, но когда я написал небольшой скрипт при помощи jQuery (скрытие блоков на подобие аккордеона с анимацией) для манипуляции с полученными через ng-Repeat DOM-элементами, возникли проблемы. Один раз из 10, скрипт на jQuery не срабатывает. Причем, это появилось, только когда я залил проект на сервер.

Пробовал использовать timeout в пол секунды, для загрузки jQuery-скрипта - стало получше, но все равно, если скрипт сильно разрастается в размере, ошибки появляются все чаще.

Нужно, как то установить загрузку моего jQuery-скрипта только после полного окончания формирования DOM-a посредством AngularJS.

P.S. Вариант с RequireJS не проходит по ряду причин.

P.P.S. Само собой скрипт jQuery обрамлен в событие $(document).ready()

http://angular.ru/guide/understanding_directives

И конкретнее: "Если необходимо подождать, пока в $scope не поступят данные, воспользуйтесь ng-if для отложенной загрузки блока DOM."

Угарная документация :)

P.S. Видимо скрипт срабатывает раньше чем сформирован DOM, это не конфликт. Следите напрямую за порядком инициализации. В идеале превратите ваш скрипт в директиву, или в случае если плагин не ваш то оберните вызов плагина директивой.

Также не стоит при написании плагинов забывать про функцию live, но по прежнему ваш jQuery код должен быть в директиве или вызываться из нее. Ангуляр гарантирует срабатывание директив в постоянном и предсказуемом порядке.

Какая есть )))
Лучше такая, чем никакой. Тем более полезные дела делают парни!

Спасибо за советы.

Попробовал я использовать загрузку jQuery-скрипта через директиву. Создал простенькую директиву:

.directive('jqueryscript', function () {
    return {
        restrict: 'E',
        template: '<script type="text/javascript" src="js/jQueryJS.js"></script>'
    }
})

и вызвал ее в конце HTML-кода. Так все работает, но если с моего jQuery-скрипта убрать таймаут, то скрипт перестает выполнятся даже локально...

Заметил, что при использовании window.onload вместо $(document).ready все работает без ошибок, но это не оптимально из-за долгой загрузки скриптов...

Не помогло???

Как я понял, ng-if работает начиная с версии Angular 1.2 , а у меня последняя релизная - 1.08.
При подключении 1.2 версии - начинают вылазить куча других ошибок и несовместимостей...

Вообще то её из angular-ui перевели в 1.1.5.
В 1.0.8 есть ng-include. Это почти то же самое. Должно помочь.

Это блять генеально !!!
Я распечатаю код, вырежу, вставлю в рамочку и повешу на стенке. Будет меня радовать долгими зимними вечерами.

Ну посмеяться мы все любители. Интересует конкретика.

Использовал такой простой вызов своего jQuery-скрипта я по одной причине - был уверен, что данная директива сработает в нужный момент (указана она в конце кода) после отрисовки всех HTML-объектов через ng-repeat.



Применил ng-include следующим образом. Сначала повесил эту директиву на блок с основным контентом

<div id="mainContent"  ng-include="showDOM()">

Далее написал в контроллере функцию проверки загрузки данных:

$scope.showDOM = function () {
          if ($scope.data.length > 0)
            return "template.html";
      }

Все равно не помогает. Стабильно мой JS код грузится только при событии window.onload и таймауту хотя бы в 100 мс...