Запустить Javascript ПОСЛЕ Angular Закончено Загрузка всех просмотров

Я создаю веб-приложение с помощью Angular, и я пытаюсь найти способ дождаться, пока все элементы data-ng-include не будут оценены, и включает завершенную загрузку. Например, меню - это загружаемое представление, как и основное содержимое каждой страницы, поэтому, по крайней мере, есть два data-ng-include, которые оцениваются и загружаются. Кроме того, в меню есть вложенный data-ng-repeat, который создает мое меню. Мне нужен способ инициировать script ПОСЛЕ того, что все эти функции включены, и любые функции angular внутри них были загружены, а DOM ACTUALLY ready.

Есть ли какое-либо событие, которое будет запущено, когда angular закончит настройку страницы?

Реализация AnguarJS является базовой, и мы в основном используем ее для шаблонов с использованием data-ng-include. Каждая страница представляет собой представление (а не представление angular, только файл html), загружаемый через data-ng-include, с верхним и нижним колонтитулами над и под ним. Заголовок также динамически загружает глобальный вид (опять же не файл angular) html, содержащий angular.

Пока что меню - единственное, что использует AngularJS для чего угодно, кроме шаблонов. Он использует его для создания меню с использованием объекта JSON, который динамически генерируется JSP и вставлен в DOM, который возвращается с сервера.

Чтобы облегчить жизнь для фронт-парней, любые повторяющиеся функции JavaScript закодированы в модули, которые обнаруживаются при загрузке страницы и динамически загружаются с использованием атрибута data-features на элементе, который нуждается в функциональности JavaScript к которому прилагается.

Например, у вас может быть <div id="mySubMenu" data-features="subMenu"></div>. При загрузке на страницу обнаружен каждый элемент с элементом данных, а связанный с ним модуль JS загружен, в этом случае мы будем загружать /scripts/modules/subMenu.js.

Что мне нужно - это отложить запуск этой функции и вложение до тех пор, пока все элементы, являющиеся результатом функции include или другой функции angular, не будут доступны на странице и будут готовы к управлению, тем более что могут быть элементы с данными - атрибуты атрибутов внутри них включают.

Кто-то в другом месте упомянул о том, что поставил контроллер на тело и ничего не оставил, но:

$scope.$on('$viewContentLoaded', function() {
    // Init Features Here
});

Это не сработало, поэтому я ищу другие варианты.

В итоге я решил использовать решение Theo в этом вопросе: Отправка события после завершения загрузки angular.js

Ответ 1

Я думаю, что подходящий ответ НЕТ. Вы должны изменить способ поиска приложения и модели и адаптировать его к "angular". Скорее всего, существует более здоровый способ добиться того, что вам нужно. Если вам нужно присоединить события к элементам, возможно, вы захотите использовать директиву, но, конечно, у меня недостаточно информации, чтобы судить на этом этапе, что лучше.

angular.module вместе с директивами - хороший вариант для изучения.

Вот демон-плункер о том, как использовать оба с подключением JQUERY:

http://plnkr.co/edit/WGdNEM?p=preview

Вот пример с директивой по отдельному файлу:

http://plnkr.co/edit/YNBSWPLeWqsfGvOTwsMB?p=preview

Ответ 2

при загрузке содержимого:

$rootScope.$on('$includeContentLoaded', function() {
    //do your will
});

по запрошенному контенту:

$rootScope.$on('$includeContentRequested', function() {
    //...
});

Ответ 3

Я уверен, что это не правильный способ сделать это, но....

Поместив нижеприведенную функцию в контроллер моего представления, запустил функцию после того, как представление было загружено в мое приложение. Я считаю, что функция запускается в следующем цикле дайджеста после загрузки представления (исправьте меня здесь, если не так), поэтому он запускается после создания страницы.

setTimeout(function(){
  //do this after view has loaded :)
  console.log('success!');
}, 0);

Возможно, вы могли бы связать их вместе с помощью обратных вызовов и/или использовать параллельную параллельную библиотеку async для выполнения другой функции после возврата каждого из представлений setTimeouts.

Ответ 4

Используйте ng-cloak, чтобы задерживать шаблоны, показанные перед компиляцией. Вы также можете добавить скрытое поле в качестве самого последнего дочернего элемента в свой html-элемент, который имеет ng-cloak (лучше использовать его в теге body или везде, где запускается ng-приложение), а затем вы можете проверить наличие этого скрытого элемента в интервальная петля

Ваша скрытая часть поля будет такой:

<div ng-include="'ngtplhidden'"></hidden>
<script type="text/ng-template" id="ngtplhidden">
<span id="elemidToCheckInAnIntervalFunc"></span>
</script>

Ответ 5

Вы можете использовать JQuery Promise и выполнить это обещание в корневом контроллере angular. Установите обещание перед тем, как запускается контроллер angular или код jquery:

var AppReadyDeferred = $.Deferred();
var AppReadyPromise = AppReadyDeferred.promise();

Внутри вашего контроллера angular, когда все будет готово, сделайте

AppReadyDeferred.resolve();

И в вашем коде jQuery подождите, пока он будет разрешен.

window.AppReadyPromise.done(() => {
  // Angular is ready to go!;
});