如何检测AngularJS何时完成从多个ng-repeats加载所有DOM

时间:2013-10-29 21:50:15

标签: angularjs angularjs-directive ng-repeat

嘿伙计,所以我有以下的预感:

我有一个ng-repeat与另一个ng-repeat和另一个ng-repeat等等(创建类似二叉树结构但有多个根的东西)。问题是我的数据被插入到正确的结构中并等待摘要实际显示屏幕上的所有内容,因为一些结构非常大。我怎么知道摘要何时完成渲染我结构的最后一个元素?我有以下内容添加到我的ng-repeates但是执行了很多次因为ng-repeats也可以重复...我怎么才能在最后一个模板加载时发出信号,而不是每次加载模板?这是我感谢另一个线程Calling a function when ng-repeat has finished

app.directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    }
});


app.directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    }
});

问题是这会引发最后一次ng-repeat,但我无法确定最后一次嵌套的ng-repeates何时结束。有没有办法检测摘要是否已经完成渲染我的所有模板和嵌套模板?

1 个答案:

答案 0 :(得分:0)

通常情况下,只需在特定重复中观看$scope.$last即可。

但是,如果我们在运行时执行时加载了大量数据,可能是Angular $postDigest来救援!

P.S。在这种情况下,请勿使用$emit。请记住,指令可以链接到任何控制器中所需的任何范围并修改它们的值,总体而言 - 除非绝对必要,否则应使用$emit$broadcast 始终 。 / p>

app.directive('resolveApplication', function($timeout) {
    return {
        restrict:'A',
        link: function (scope) {
            // start by waiting for digests to finish
            scope.$$postDigest(function() {
                // next we wait for the dom to be ready
                angular.element(document).ready(function () {
                    // finally we apply a timeout with a value
                    // of 0 ms to allow any lingering js threads
                    // to catch up
                    $timeout(function() {
                        // your dom is ready and rendered
                        // if you have an ng-show wrapper 
                        // hiding your view from the ugly 
                        // render cycle, we can go ahead 
                        // and unveil that now:
                        scope.ngRepeatFinished = true;
                    },0)
                });
            });
        }
    } 
});