entre - directivas angularjs

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

Question

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.

Answer 1

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

<div elem-ready="someMethod()"></div>

o para aquellos que usan el controlador como sintaxis ...

<div elem-ready="vm.someMethod()"></div>

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.

Answer 2

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 compilació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.

Answer 3

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

<div ng-controller="MainCtrl">
<div ng-view></div>
</div>

Desde MainCtrl puedes escuchar el evento

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

Verifica la Demo

Answer 4

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 ++;
});

Answer 5

Estaba usando {{myFunction()}} en la plantilla pero luego encontré otra forma here 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();
});
}]);

Answer 6

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

Aquí hay un Plunker Link .

Answer 7

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

por ejemplo, <div class="modal fade" id="modalFacultyInfo" role="dialog" ng-init="initModalFacultyInfo()"> ..</div>

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

Answer 8

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);
}
})
}
}

Answer 9

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é.

 <body>
-- some html here --
--and at the end or where ever you want --
<div ng-init="FunCall()"></div>
</body>

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

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

Answer 10

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);

Answer 11

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'');
});

Answer 12

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í

Answer 13

var myTestApp = angular.module("myTestApp", []);
myTestApp.controller("myTestController", function($scope, $window) {
$window.onload = function() {
alert("is called on page load.");
};
});