javascript - AngularJS - How to query the DOM when directive rendering is complete - Stack Overflow

admin管理员组

文章数量:1344174

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

here is a schema of my idea:

Here is the directive 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>',
        pile: 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)
                });


            }
        }
    };
});

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

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-ment line 35 and ment 34 to see it in action).

What would be the right way to do it?

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

here is a schema of my idea:

Here is the directive 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>',
        pile: 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)
                });


            }
        }
    };
});

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

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-ment line 35 and ment 34 to see it in action).

What would be the right way to do it?

• javascript
• web
• widget
• ponents
• angularjs

Share Improve this question Follow asked Jan 9, 2013 at 12:54 Shlomi SchwartzShlomi Schwartz 8,9133030 gold badges119119 silver badges198198 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

See is there a post render callback for Angular JS directive?

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

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

Two observations:

• you don't need pile imho, but link function
• you should wait until the element is ready, instead of using timeout

So:

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>',
    link: function (scope, iElement, iAttrs) {
      var minHeight = 30;
      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"
          });
        }
      };

      iElement.ready(function () {  
         scope.$watch(function () {
           scope.onScrollHeight();
         });
      });        
    }
  };
});

See jsFiddle.

Edit:

Because 2 images say more than 1000 words, here are two screenshots:

本文标签： javascriptAngularJSHow to query the DOM when directive rendering is completeStack Overflow