Как отслеживать изменения в Angular для jQuery?

Question

[makerkz]

Возникли проблемы с формулировкой вопроса. Если что, прошу поправить.

Есть AngularJS приложение, в которое было решено подключить различные скрипты (для анимаций, уведомлений и т.д., Bootstrap JS, например). Примерная структура приложения:
- index.html - подключение всех JS, CSS файлов и т.д.
- /scripts - скрипты и прочее
- /partials/page.html - шаблон страницы.
- /partials/page2.html - шаблон другой страницы.

Содержимое файла index.html:

...head
<ui-view></ui-view>
...foot

В index.html через ui-view (используется ui-router) подключается файл page.html. В общем-то ничего сложного. Теперь о проблеме - для конкретизации возьмем, к примеру, bootstrap tooltip:

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

Если подключать данный код в файл index.html, то все работает. Если же подключить его в файл page.html, то работать ничего не будет (оно и понятно, для этого рекомендуется использовать директивы - ui.bootstrap, например).

Не работает все потому, что при загрузке jQuery он просматривает DOM-дерево (вместо содержимого page.html у нас в этот момент обычный ui-view, tooltip'а у нас в этот момент само-собой нет, он появляется после загрузки AngularJS шаблона).

Проблему данную можно было бы решить сборкой html шаблонов в js файл (grunt-html2js), что я и сделал. Теперь динамически шаблоны не подключаются, а подключается лишь один js файл, шаблоны грузятся через $templateCache. Вроде бы все дожно работать, но нет, при загрузке другой страницы - например, page2.html, все снова слетает, и приходится перезагружать страницу. Не работает все потому (как вы наверно уже догадались), что page2.html подгружается в DOM-дерево динамически.

Как я понял, сделать refresh DOM-дерева с помощью jQuery нельзя (можно лишь сделать watching функций с помощью on()). Мне нужно, чтобы при загрузке нового шаблона в DOM через ui-view работали все функции, которые связаны с jQuery. Функций, как таковых нет, работа идет через data-аттрибуты.
data-toggle="tooltip" data-placement="top"
Что бы вы могли посоветовать в данном случае? Хотя бы, куда можно обратиться с данной проблемой?

Answer 1

[_ _]

Используйте angular-ui.github.io/bootstrap

Comments

[makerkz]

Вы видимо не полностью прочитали вопрос.

[Сергей Протько]

@makerkz а вы видимо не понимаете, что вам всеравно придется переписывать логику инициализации всего этого добра вне зависимости от решения, ибо у вас DOM постоянно перекалбашивается.

[_ _]

@makerkz все я прекрасно прочитал. Вы не перекладывайте с больной головы на здоровую ("Есть AngularJS приложение, в которое было решено подключить различные скрипты"), а возьмите и поищите уже готовые директивы и сервисы, которые обеспечат вам функциональность, которой вы хотите добиться путем подключения jquery-скриптов в проект.

Answer 2

[Сергей Протько]

Директивы. Напишите директиву которая подключает тултипы и все будет хорошо. Вообще любые манипуляции в DOM стоит делать через директивы и только.

Comments

[makerkz]

Нет, они вообще не рассматриваются. Скриптов очень много, так что придётся писать около сотни директив. Я понимаю на счёт рекомендаций сообщества, но тут ситуация иная.

[Сергей Протько]

@makerkz директива toggle покрывает уже кучу вещей, не находите? Это своего рода селектор который будет срабатывать в случае если такой элемент будет появляться и ищезать. Так или иначе через директивы придется делать. Либо кастыли с отслеживанием элементов через querySelectorAll возвращающий вам кошерный NodeList от документа (он всегда в актуальном состоянии, можно один раз вызвать и там всегда будут все элементы подпадающие под селектор) либо декораторы сервисов типа $parse и т.д. но это уже изврат.

[makerkz]

Помимо директивы toggle будет ещё достаточно всего. Бутстрап в данном случае, лишь как один из примеров. Понимаете, просто тут моя логика говорит, что есть и плохой, но путь решения данной проблемы. Даже если отойти от использования AngularJS, и на чистом js подключить содержимое html файла с tooltip в dom дерево, то работать это также не будет. Так что можно абстрагироваться от Angular. Все же, чтобы вы посоветовали? К примеру, если бы у нас не было Angular, а был pure js.

[Сергей Протько]

@makerkz если бы был pure js то все бы зависило от поддержки браузерами. Если у нас только актуальные версии браузеров можно было бы использовать Mutation Observer, либо пилить свой кастыль с querySelectorAll. Но вам всеравно придется пилить логику инициализации свою и вручную все инициализировать. Так что вам так или иначе придется писать что-то вроде директив.

Так что хватит тратить время на поиск кривово решения, при том что объем работы в самом простом случае будет не настолько уж и меньше чем написать пару десятков директив.

Answer 3

[Sergey Romanov]

Можно попробовать испоьзовать событие $viewContentLoaded.

var app = angular.module('myApp', []).run(function($rootScope){
    $rootScope.$on('$viewContentLoaded', function(){
        $('[data-toggle="tooltip"]').tooltip();
        $.tooltip.init();
        $.fn.tooltip.init();
    });
})

И так реинициировать все типа бустрап чтучки. Тут 3 варианта так как я не пробовал и не знаю что быдет работать.