javascript - tag - donde van los script en html
Ejecutar Javascript DESPUÉS de que Angular haya finalizado Cargando todas las vistas (5)
Creo que la respuesta apropiada es NO. Tienes que cambiar la forma en que estás viendo tu aplicación y modelo y adaptarla a la "forma angular". Lo más probable es que haya una forma más saludable de lograr lo que necesita. Si necesita adjuntar eventos a los elementos, es probable que desee utilizar una directiva pero, por supuesto, no tengo suficiente información para juzgar en esta etapa qué es lo mejor.
El módulo angular junto con las directivas es una buena opción para explorar.
Aquí hay una demostración del plunker sobre cómo usar ambos con un complemento JQUERY:
http://plnkr.co/edit/WGdNEM?p=preview
Aquí hay un ejemplo con una directiva en un archivo separado:
Estoy construyendo una aplicación web utilizando Angular, y estoy tratando de encontrar una manera de esperar hasta que todos los elementos de data-ng-include hayan sido evaluados y se haya completado la carga. Por ejemplo, el menú es una vista que se carga, al igual que el contenido principal de cada página, por lo menos al menos hay dos data-ng-include que se evalúan y se cargan. Además de eso, el menú incluir tiene data-ng-repeat anidados data-ng-repeat que construyen mi menú. Necesito una forma de iniciar la secuencia de comandos DESPUÉS de que se hayan cargado todas estas funciones y todas las funciones angulares dentro de ellas y el DOM esté REALMENTE listo.
¿Hay algún evento que se active cuando Angular haya terminado de configurar la página?
La implementación de AnguarJS es básica y básicamente la estamos utilizando para la creación de plantillas a través del uso de data-ng-include. Cada página es una vista (no una vista angular, solo un archivo html), cargada a través de data-ng-include, con el encabezado y el pie de página arriba y debajo. El encabezado también carga dinámicamente un archivo html de vista global (de nuevo no es una vista angular) que incluye angular.
Hasta ahora, el menú es lo único que utiliza AngularJS para cualquier otra cosa que no sean plantillas. Lo utiliza para crear un menú utilizando un objeto JSON generado de forma dinámica por JSP e insertado en el DOM que se devuelve desde el servidor.
Con el fin de facilitar la vida a los usuarios del front-end, cualquier tipo de funcionalidad de JavaScript repetida se codifica en módulos, que se detectan en la carga de la página y se cargan dinámicamente utilizando un atributo de características de datos en el elemento que debe adjuntarse la funcionalidad de JavaScript a.
Por ejemplo, puede tener <div id="mySubMenu" data-features="subMenu"></div> . En la carga de la página, se detecta cada elemento con un elemento de características de datos y se carga el módulo JS asociado, en este caso cargaríamos /scripts/modules/subMenu.js .
Lo que necesito es una forma de retrasar la ejecución de esta función y la conexión hasta que todos los elementos resultantes de una función de inclusión u otra función angular estén en la página y listos para ser manipulados, especialmente porque puede haber elementos con atributos de características de datos dentro de ellos. incluye.
Alguien en otra parte había mencionado poner un controlador en el cuerpo y no poner nada de lado, pero:
$scope.$on(''$viewContentLoaded'', function() {
// Init Features Here
});
Eso no funcionó, así que estoy aquí buscando otras opciones.
Terminé yendo con la solución de Theo en esta pregunta: Enviando un evento cuando angular.js terminó de cargarse
Estoy seguro de que esta no es la forma correcta de hacerlo pero ...
Al poner la siguiente función en mi controlador de vista, ejecuté la función después de que la vista se hubiera cargado en mi aplicación. Creo que la función se ejecuta en el siguiente ciclo de resumen después de la carga de la vista (corríjame aquí si es incorrecta), por lo que se ejecuta una vez que se forma la página.
setTimeout(function(){
//do this after view has loaded :)
console.log(''success!'');
}, 0);
Es posible que pueda encadenarlos a través de devoluciones de llamada y / o usar una biblioteca paralela asíncrona para ejecutar otra función, después de que cada una de las vistas que setTimeouts haya devuelto.
Puede usar una promesa JQuery y cumplir esta promesa dentro de su controlador de raíz angular. Configure la promesa antes de que se ejecute el controlador angular o el código jquery:
var AppReadyDeferred = $.Deferred();
var AppReadyPromise = AppReadyDeferred.promise();
Dentro de su controlador angular una vez que todo esté listo, haga
AppReadyDeferred.resolve();
Y en tu código jQuery espera a que se resuelva.
window.AppReadyPromise.done(() => {
// Angular is ready to go!;
});
Use ng-cloak para retrasar las plantillas que se muestran antes de la compilación. También puede agregar un campo oculto como el último elemento secundario a su elemento html que tiene ng-cloak (es mejor usarlo en la etiqueta del cuerpo o donde comience su aplicación ng) y luego puede verificar la existencia de este elemento oculto bucle de intervalo
Tu parte de campo oculto sería así
<div ng-include="''ngtplhidden''"></hidden>
<script type="text/ng-template" id="ngtplhidden">
<span id="elemidToCheckInAnIntervalFunc"></span>
</script>
en el contenido cargado:
$rootScope.$on(''$includeContentLoaded'', function() {
//do your will
});
en el contenido solicitado:
$rootScope.$on(''$includeContentRequested'', function() {
//...
});