Как отследить когда Angular отрендерил представление?

Question

[Илья Оськин]

Здравствуйте! Ситуация следующая: есть необходимость производить некоторые манипуляции с dom с помощью jQuery, проблема в том, что манипуляции производятся с элементами которые рендерит Ангуляр и если инициализировать jquery скрипт сразу, то ничего не работает, тк ангуляр запаздывает с отрисовкой, поэтому приходится использовать $timeout'ы, чтобы всё происходило в правильной последовательности.
Вопрос в том, как отследить момент когда Ангуляр отрисовал все элементы и вызвать по такому событию инициализацию jq скрипта?

Answer 1

[Александр Аксентьев]

Сделайте отдельный контроллер и view под кусок на котором jQuery нужно запускать.
В этом контроллере запускайте jQuery. В этот момент шаблон уже отрендерен.

<div ng-include="'app/someView.html'" ng-controller="someController"></div>

Comments

[Илья Оськин]

Таких кусков к сожалению очень много, буквально по всему приложению, поэтому такой подход будет очень не практичен.
Элементарно карусель на jQuery есть на каждой странице

[Александр Аксентьев]

Илья Оськин: у вас шаблон для каждой странице не один и тот же? Зачем вам ангуляр тогда?

Вы что-то вообще не так делаете.
Либо вам не нужен ангуляр, либо выкиньте jQuery и используйте библиотеки под ангуляр.

Если у вас уже "целое" приложение котором много кусков на jQuery, и которые по видимому вполне себе работают, зачем вы туда впиндюриваете ангуляр? Работают и не трогайте их.

[Илья Оськин]

Шаблон один, туда встраиваются отельные куски dom в зависимости от url, здесь всё как надо
В основном, я считаю размеры блоков с помощью jquery, в принципе, не составит труда их считать и спомощью чистого js, но это ситуацию не изменит, так как, если инициализировать функцию, которая считает размеры блоков сразу ей просто нечего будет считать, так как блоки ещё не отрисованы

[Александр Аксентьев]

Илья Оськин: На каждую функциональную и не очень часть сайта у вас должен быть отдельный шаблон с контроллером, в котором будут происходить нужные действия, как уже и писал выше.

Естественно если вы пытаетесь мимо ангуляра где-то в момент инициализации(до рендера) приложения считать какие-то магические пиксели которых еще нет- будет ошибка, а не в момент когда контроллер загрузился вместе со своим шаблоном.

[Илья Оськин]

Ну вот допустим так выглядит контроллер той функциональной части, где выводятся эти блоки, под неё у меня отдельный шаблон, а ниже инициализируется функция CalcView которая считает пиксели, без тайаута всё естественно работает не так. Я всё равно не до конца понимаю правилен ли такой подход

app.controller('listCtrl', function($scope, $http) {
$http.get('/api/v0/cases/').success(function(data){
$scope.cases = data;
});
$timeout(calcView, 2900)
});

[Александр Аксентьев]

Илья Оськин: может просто считать пиксели на JS плохая идея?)

В таком варианте я не вижу адекатного решения кроме watch изменений в cases и вызова calcView.

[Владимир]

Запакуйте карусель в компонент и пропишите код в контроллере один раз.

Answer 2

[_ _]

Есть недокументированная функция $scope.$$postDigest, которая регистрирует callback-функцию, которая вызовется после завершения $digest-цикла (сработает один раз, как закончится очередной $digest-цикл).
У меня обычно схема следующая:
1. Осуществилось действие, вызывающее перерисовку view (начался $digest-цикл)
2. В процессе обработки действия регистрирую функцию через $$postDigest
3. Все изменения зафиксированы в DOM, $digest-цикл закончился, функция из пункта 2 отработала - все рады

Answer 3

[lega]

Можете попробовать добавить в DOM ng-init="runMyFunc()", когда вызовется runMyFunc, DOM должен быть уже на месте.

Answer 4

[Faliah]

По-моему Директивы и их функция link созданы именно для этих вещей. Если же вы используете компоненты, то у них есть lifecycle метод $postLink()