Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.10.2013, 14:52
Новичок на форуме
Отправить личное сообщение для defreend Посмотреть профиль Найти все сообщения от defreend
 
Регистрация: 15.10.2013
Сообщений: 6

Конфликт 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()

Последний раз редактировалось defreend, 15.10.2013 в 14:56.
Ответить с цитированием
  #2 (permalink)  
Старый 15.10.2013, 15:15
Интересующийся
Отправить личное сообщение для Olival888 Посмотреть профиль Найти все сообщения от Olival888
 
Регистрация: 15.10.2013
Сообщений: 10

http://angular.ru/guide/understanding_directives

И конкретнее: "Если необходимо подождать, пока в $scope не поступят данные, воспользуйтесь ng-if для отложенной загрузки блока DOM."
Ответить с цитированием
  #3 (permalink)  
Старый 15.10.2013, 15:29
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Цитата:
Этот документ (косвенно) пытается объяснить, как директивы AngularJS и связанный движок компиляции, работают так, чтобы вы не разбрасывали лапшу по кругу
Угарная документация

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

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

Последний раз редактировалось DjDiablo, 15.10.2013 в 16:07.
Ответить с цитированием
  #4 (permalink)  
Старый 15.10.2013, 15:33
Интересующийся
Отправить личное сообщение для Olival888 Посмотреть профиль Найти все сообщения от Olival888
 
Регистрация: 15.10.2013
Сообщений: 10

Какая есть )))
Лучше такая, чем никакой. Тем более полезные дела делают парни!
Ответить с цитированием
  #5 (permalink)  
Старый 15.10.2013, 16:29
Новичок на форуме
Отправить личное сообщение для defreend Посмотреть профиль Найти все сообщения от defreend
 
Регистрация: 15.10.2013
Сообщений: 6

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

Попробовал я использовать загрузку jQuery-скрипта через директиву. Создал простенькую директиву:
.directive('jqueryscript', function () {
    return {
        restrict: 'E',
        template: '<script type="text/javascript" src="js/jQueryJS.js"></script>'
    }
})

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

Заметил, что при использовании window.onload вместо $(document).ready все работает без ошибок, но это не оптимально из-за долгой загрузки скриптов...
Ответить с цитированием
  #6 (permalink)  
Старый 15.10.2013, 16:31
Интересующийся
Отправить личное сообщение для Olival888 Посмотреть профиль Найти все сообщения от Olival888
 
Регистрация: 15.10.2013
Сообщений: 10

Сообщение от Olival888 Посмотреть сообщение
http://angular.ru/guide/understanding_directives

И конкретнее: "Если необходимо подождать, пока в $scope не поступят данные, воспользуйтесь ng-if для отложенной загрузки блока DOM."
Не помогло???
Ответить с цитированием
  #7 (permalink)  
Старый 15.10.2013, 17:54
Новичок на форуме
Отправить личное сообщение для defreend Посмотреть профиль Найти все сообщения от defreend
 
Регистрация: 15.10.2013
Сообщений: 6

Сообщение от Olival888 Посмотреть сообщение
Не помогло???
Как я понял, ng-if работает начиная с версии Angular 1.2 , а у меня последняя релизная - 1.08.
При подключении 1.2 версии - начинают вылазить куча других ошибок и несовместимостей...
Ответить с цитированием
  #8 (permalink)  
Старый 15.10.2013, 17:58
Интересующийся
Отправить личное сообщение для Olival888 Посмотреть профиль Найти все сообщения от Olival888
 
Регистрация: 15.10.2013
Сообщений: 10

Вообще то её из angular-ui перевели в 1.1.5.
В 1.0.8 есть ng-include. Это почти то же самое. Должно помочь.
Ответить с цитированием
  #9 (permalink)  
Старый 16.10.2013, 03:59
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Цитата:
.directive('jqueryscript', function () {
    return {
        restrict: 'E',
        template: '<script type="text/javascript" src="js/jQueryJS.js"></script>'
    }
})
Это блять генеально !!!
Я распечатаю код, вырежу, вставлю в рамочку и повешу на стенке. Будет меня радовать долгими зимними вечерами.
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 16.10.2013 в 04:11.
Ответить с цитированием
  #10 (permalink)  
Старый 16.10.2013, 15:57
Новичок на форуме
Отправить личное сообщение для defreend Посмотреть профиль Найти все сообщения от defreend
 
Регистрация: 15.10.2013
Сообщений: 6

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

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


Сообщение от Olival888 Посмотреть сообщение
В 1.0.8 есть ng-include. Это почти то же самое. Должно помочь.

Применил ng-include следующим образом. Сначала повесил эту директиву на блок с основным контентом
<div id="mainContent"  ng-include="showDOM()">
Далее написал в контроллере функцию проверки загрузки данных:
$scope.showDOM = function () {
          if ($scope.data.length > 0)
            return "template.html";
      }

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите найти конфликт скрипта в ИЕ koshsh jQuery 2 21.04.2012 09:32
jQuery: странные вещи при добавлении скрипта wwwboy jQuery 2 18.12.2011 22:32
Конфликт с jquery stvord Элементы интерфейса 3 01.09.2011 22:33
Конфликт Jquery и Mootools Bangoo jQuery 1 28.03.2011 13:03
Переделка скрипта меню на JQuery Bangoo jQuery 1 10.01.2011 13:50