Como você pode detectar quando a renderização HTML é concluída no AngularJS
Eu fiz uma extensa pesquisa sobre esse assunto, mas não importa o que eu faça, acho extremamente difícil alcançar esse objetivo.
Quero executar o código quando todos os elementos tiverem sido totalmente renderizados no aplicativo da web AngularJS. Acho que encontrei uma solução sugerindo o uso de roteadores e visualizações, mas não consegui fazer isso funcionar no meu caso, pois parece que requer certa configuração.
Quando voce temng-repeat
e muito aninhadodirectives
que gerará HTML / conteúdo com base em várias condições usandong-if
, Notei que a renderização em HTML continua mesmo depois que o evento pronto para o documento é acionado ou o conteúdo da exibição é carregado.$viewContentLoaded
evento é acionado.
A ideia mais próxima que tenho é usar$watch
ao longo do comprimento dos filhos do elemento de um dadodirective
. Toda vez que o$watch
é executado, contador de incrementorenderCount
. Em outro evento do timer, verifique se o contadorrenderCount
não mudaram nos últimos três ou três segundos, podemos supor que a renderização seja feita.
O código para observar as crianças e verificar se não há mais renderização pode ser o seguinte:
app.directive('whenRenderingDone', function($interval, $parse){
return {
link: function (scope, el, attrs) {
var renderingCount = 0;
function watchForChildren() {
scope.$watch(function(){
return $(':input', el).length;
}, function(newVal, oldVal){
if (newVal) {
renderingCount++;
}
})
}
watchForChildren();
//Check counter every 3 seconds, if no change since last time, this means rendering is done.
var checkRenderingDone = $interval(function(){
var lastCount = lastCount || -1;
if (lastCount === renderingCount) {
var func = $parse(attrs.whenRenderingDone);
$interval.cancel(checkRenderingDone);
func(scope);
}
lastCount = renderingCount || -1;
}, 3000);
}
}
});
Vou tentar implementar a abordagem acima e, se você tiver comentários, entre em contato.
Tarek