angularjs - 您如何检测 AngularJS 中的 HTML 渲染何时完成

Question

我已经对这个主题进行了广泛的研究，但无论我做什么，我发现实现这个目标都非常困难。

我想在 AngularJS 网络应用程序中完全呈现所有元素后执行代码。我想我找到了建议使用路由器和 View 的解决方案，但我无法在我的案例中使用它，因为它似乎需要特定的配置。

当你有 ng-repeat 和许多嵌套的 directives 时，它们将使用 ng-if 根据各种条件生成 HTML/Content ，我注意到即使在触发文档就绪事件或加载 View 内容后，HTML 渲染仍在继续，即 $viewContentLoaded 事件被触发。

我最接近的想法是在给定指令的元素的子元素的长度上使用$watch。每次执行 $watch 时，递增计数器 renderCount。然后，在另一个计时器事件中，检查计数器 renderCount 是否在过去 3-5 秒内没有变化，然后我们可以假设渲染已完成。

监视 child 并检查是否没有更多渲染发生的代码如下:

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

我会尝试实现上述方法，如果您有任何反馈，请告诉我。

塔里克

Answer 1

我开发了以下在 Chrome 和 IE11 下运行良好的指令:

app.directive('whenRenderingDone',  function($timeout, $parse){
    return {
        link: function (scope, el, attrs) {
            var lastCount;
            var lastTimer = 5000; // Initial timeout
            //Check counter every few seconds, if no change since last time, this means rendering is done.
            var checkRenderingDone = function (){
                var mainPromiseResolved = scope.mainPromiseResolved;
                lastCount = lastCount || -1;
                if (lastCount === el.find('*').length && mainPromiseResolved) {
                    console.log('Rendering done, lastCount = %i', lastCount);
                    var func = $parse(attrs.whenRenderingDone);
                    func(scope);
                } else {
                    lastCount = el.find('*').length;
                    console.log('mainPromiseResolved = %s, lastCount %i', mainPromiseResolved, lastCount)
                    console.log('Rendering not yet done. Check again after %i seconds.', lastTimer/1000.00);
                    stopCheckRendering = $timeout(checkRenderingDone, lastTimer); 
                    lastTimer = lastTimer - 1000;
                    if (lastTimer <= 0) {
                        lastTimer = 1000;
                    }
                    return stopCheckRendering;
                }
            }
            var stopCheckRendering;
            stopCheckRendering = checkRenderingDone();
            el.on('$destroy', function() {
                if (stopCheckRendering) {
                    $timeout.cancel(stopCheckRendering);
                }
              });
        }
    }
});

希望对您有所帮助，如果您有任何需要改进的意见，请告诉我。 See this让您了解它是如何工作的。

塔里克