AngularJS - 如何查询DOM时，指令渲染完成 [英] AngularJS - How to query the DOM when directive rendering is complete

问题描述

我想实现使用AngularJS指令自定义滚动窗格组件。在下面的的jsfiddle比如我具备的基本原型的一个例子。

I'm trying to implement a custom scroll pane component using an AngularJS directive. in the following jsfiddle example I have an example of the basic prototype.

下面是我的想法的一个模式：

here is a schema of my idea:

下面是指令code：

    myApp.directive('lpScrollPane', function factory() {
    return {
        restrict: 'A',
        replace: true,
        transclude: true,
        template: '<div class="scrollPaneWrapper"><div class="scrollPane" ng-transclude></div><div class="thumbTrack" ></div></div>',
        compile: function (tElement, tAttrs) {
            var minHeight = 30;
            return function (scope, iElement, iAttrs) {
                var thumbTrack = angular.element(iElement.children()[1]);

                scope.onScrollHeight = function () {
                    console.log(iElement.children()[0].scrollHeight);

                    var H1 = iElement[0].offsetHeight;
                    var H2 = iElement.children()[0].scrollHeight;
                    if (H2 > H1) {
                        var trackHeight = Math.round(minHeight + (H1 - minHeight) * (1 - Math.pow((H2 - H1) / H2, 0.8)));
                        thumbTrack.css({
                            display: "block",
                            height: trackHeight + "px"
                        });
                        console.log(H2, H1, trackHeight);
                    } else {
                        thumbTrack.css({
                            display: "none"
                        });
                    }
                };

                scope.$watch(function () {
                    scope.onScrollHeight();
                    //setTimeout(scope.onScrollHeight, 100)
                });


            }
        }
    };
});

基本上有2次下潜1溢出隐藏和一个具有溢出滚动和另一个div模仿拇指跟踪器。

Basically there are 2 dives 1 with overflow hidden and one with overflow scroll and another div to mimic the thumb tracker.

我的目标是监视scrollHeight属性属性，然后相应地更改跟踪高度。问题是前DOM渲染所以在显示和计算跟踪器的延迟$手表被炒鱿鱼。现在我用的setTimeout对手表的功能和它工作正常（非注释行35和评论34看到它在行动）。

My Goal is to monitor the scrollHeight property and then change the tracker height accordingly. the issue is the $watch gets fired before the DOM is rendered so there is a delay in showing and calculating the tracker. For now I used setTimeout on the watch function and it works fine (un-comment line 35 and comment 34 to see it in action).

什么是做正确的方式？

What would be the right way to do it?

推荐答案

请参阅is有一个帖子渲染角JS指令回调？

不幸的是，没有办法确定渲染完成时（例如，​​没有事件）。使用$超时似乎是最好的解决方法可用。

Unfortunately, there is no way to determine when rendering is complete (e.g., there is no event). Using $timeout seems to be the best workaround available.

在上面的链接，@Nik在评论中说，他在检查中提到 $（'TR'）长度GT。 3 ，为他的特定场景，以确定渲染完成时。也许有一些你可能在DOM定期检查，以确定渲染完成。

In the link above, @Nik mentioned in a comment that he was checking $('tr').length > 3, for his particular scenario, to determine when rendering was complete. Maybe there is something you could periodically examine in the DOM to determine that rendering is complete.

这篇关于AngularJS - 如何查询DOM时，指令渲染完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！