Я пытаюсь реализовать пользовательский компонент панели прокрутки, используя директиву AngularJS. В следующихпример jsfiddle У меня есть пример базового прототипа.

вот схема моей идеи:

Вот код директивы:

    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 со скрытым переполнением, одно с прокруткой переполнения и другое деление для имитации трекера большого пальца.

Моя цель - отслеживать свойство scrollHeight, а затем соответствующим образом изменять высоту трекера. проблема в том, что $ watch запускается до того, как DOM рендерится, поэтому есть задержка в показе и вычислении трекера. На данный момент я использовал setTimeout в функции наблюдения, и она отлично работает (откомментируйте строку 35 и комментарий 34, чтобы увидеть ее в действии).

Каков был бы правильный способ сделать это?