Evento AngularJs para llamar después de que se carga el contenido

Tengo una función a la que quiero llamar después de que se carga el contenido de la página. Leí acerca de $ viewContentLoaded y no funciona para mí. Estoy buscando algo así como

document.addEventListener('DOMContentLoaded', function () { //Content goes here }, false); 

La llamada anterior no funciona para mí en el controlador de AngularJs.

De acuerdo con la documentación de $ viewContentLoaded , se supone que debe funcionar

Emitido cada vez que se recarga el contenido ngView.

$viewContentLoaded evento $viewContentLoaded que significa que para recibir este evento necesita un controlador padre como

 

Desde MainCtrl puedes escuchar el evento

  $scope.$on('$viewContentLoaded', function(){ //Here your view content is fully loaded !! }); 

Verifica la Demo

Angular <1.6.X

 angular.element(document).ready(function () { console.log('page loading completed'); }); 

Angular> = 1.6.X

 angular.element(function () { console.log('page loading completed'); }); 

arreglado – 2015.06.09

Use una directiva y el método de elemento angular ready manera:

js

 .directive( 'elemReady', function( $parse ) { return { restrict: 'A', link: function( $scope, elem, attrs ) { elem.ready(function(){ $scope.$apply(function(){ var func = $parse(attrs.elemReady); func($scope); }) }) } } }) 

html

 

o para aquellos que usan el controlador como syntax …

 

El beneficio de esto es que puede ser tan amplio o granular con su UI como desee y está eliminando la lógica DOM de sus controladores. Yo diría que esta es la manera angular recomendada.

Es posible que deba priorizar esta directiva en caso de que tenga otras directivas operando en el mismo nodo.

Puede llamarlo directamente agregando {{YourFunction()}} después del elemento HTML.

Aquí hay un Plunker Link .

Tuve que implementar esta lógica mientras manejaba con los gráficos de Google. Lo que hice fue que al final de mi html dentro de la definición del controlador agregué.

   -- some html here -- --and at the end or where ever you want -- 

y en esa función simplemente llame a su lógica.

 $scope.FunCall = function () { alert("Called"); } 

Si obtiene un error de $ digest ya en progreso, esto podría ayudar:

 return { restrict: 'A', link: function( $scope, elem, attrs ) { elem.ready(function(){ if(!$scope.$$phase) { $scope.$apply(function(){ var func = $parse(attrs.elemReady); func($scope); }) } else { var func = $parse(attrs.elemReady); func($scope); } }) } } 
 var myM = angular.module('data-module'); myM.directive('myDirect',['$document', function( $document ){ function link( scope , element , attrs ){ element.ready( function(){ } ); scope.$on( '$viewContentLoaded' , function(){ console.log(" ===> Called on View Load ") ; } ); } return { link: link }; }] ); 

El método anterior funcionó para mí

Estaba usando {{myFunction()}} en la plantilla pero luego encontré otra forma aquí usando $timeout dentro del controlador. Pensé que lo compartiría, funciona muy bien para mí.

 angular.module('myApp').controller('myCtrl', ['$timeout', function($timeout) { var self = this; self.controllerFunction = function () { alert('controller function');} $timeout(function () { var vanillaFunction = function () { alert('vanilla function'); }(); self.controllerFunction(); }); }]); 

Correr después de que la carga de la página se satisfaga parcialmente configurando un detector de eventos en el evento de carga de la ventana

 window.addEventListener("load",function()...) 

Dentro del module.run(function()...) de angular tendrá acceso a la estructura y las dependencias del módulo.

Puede broadcast y emit eventos para puentes de comunicaciones.

Por ejemplo:

  • módulo conjunto onload evento y comstackción lógica
  • evento de transmisión del módulo a los controladores cuando la lógica lo requería
  • los controladores escucharán y ejecutarán su propia lógica en función de los procesos de carga del módulo.

Si desea que cierto elemento esté completamente cargado, use ng-init en ese elemento.

por ejemplo,

la función initModalFacultyInfo () debería existir en el controlador.

Descubrí que si tiene vistas anidadas, $ viewContentLoaded se activa para cada una de las vistas anidadas. Creé esta solución alternativa para encontrar el $ viewContentLoaded final. Parece que funciona bien para configurar $ window.prerenderReady como requiere Prerender (entra en .run () en la aplicación principal.js):

 // Trigger $window.prerenderReady once page is stable // Note that since we have nested views - $viewContentLoaded is fired multiple // times and we need to go around this problem var viewContentLoads = 0; var checkReady = function(previousContentLoads) { var currentContentLoads = Number(viewContentLoads) + 0; // Create a local copy of the number of loads if (previousContentLoads === currentContentLoads) { // Check if we are in a steady state $window.prerenderReady = true; // Raise the flag saying we are ready } else { if ($window.prerenderReady || currentContentLoads > 20) return; // Runaway check $timeout(function() {checkReady(currentContentLoads);}, 100); // Wait 100ms and recheck } }; $rootScope.$on('$stateChangeSuccess', function() { checkReady(-1); // Changed the state - ready to listen for end of render }); $rootScope.$on('$viewContentLoaded', function() { viewContentLoads ++; }); 
 var myTestApp = angular.module("myTestApp", []); myTestApp.controller("myTestController", function($scope, $window) { $window.onload = function() { alert("is called on page load."); }; }); 

Yo uso setInterval para esperar el contenido cargado. Espero que esto te ayude a resolver ese problema.

 var $audio = $('#audio'); var src = $audio.attr('src'); var a; a = window.setInterval(function(){ src = $audio.attr('src'); if(src != undefined){ window.clearInterval(a); $('audio').mediaelementplayer({ audioWidth: '100%' }); } }, 0);