如何在AngularJS中检测HTML渲染完成

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

我想在AngularJS Web应用程序中的所有元素完全呈现时执行代码。我认为我找到了一个建议使用路由和视图的解决方案，但是在我的情况下，我无法使其工作，因为似乎需要特定的配置。

当你使用ng-repeat和许多嵌套的directives，这些指令会根据各种条件生成基于HTML/内容的内容，使用ng-if时，我注意到HTML渲染即使在文档准备就绪事件被触发或视图内容已加载，即$viewContentLoaded事件被触发后仍然继续。

我能想到的最接近的方法是使用$watch监视给定directive的元素的子元素的数量。每次执行$watch时，都会递增计数器renderCount。然后，在另一个计时器事件中，检查计数器renderCount在过去的3-5秒内是否没有发生变化，如果是，则可以假设渲染已完成。

用于监视子元素并检查是否没有进行更多渲染的代码可以如下所示：

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();
            //每3秒钟检查一次计数器，如果与上次相比没有变化，这意味着渲染已完成。
            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);
        }
    }
});

我将尝试实施上述方法，如果您有反馈，请告诉我。

Tarek