0

I am running in to some issues with angular where i cant seem to get my head around. I am writing a directive which will check if the scroll position of the window passes the end of an DOM element.

I am using ng-repeat within this element to parse my data. The issue i am having now is that the first time my directive runs the height of the element is not correct yet because my data is not yet parsed.

Is there any way to excecute my directive once the containing data has been loaded? I can get around it with dirty hacks, but ideally i wish this all to be in 1 single directive as it will be used multiple times.

Here's the example code:

<div scrollspy>
    <a href="#" ng-repeat="item in items"></a>
</div>

angular.module('module').directive('scrollspy', ['$window', function ($window) {
    return function (scope, element) {
        // element height here is only 30 because our data is not loaded yet. 
        // I whish to execute this code when all items are parsed in the DOM
    }
}])

Thank you all for your time!

ngr
  • 139
  • 2
  • 10
  • You should be able to set a 'watch' when your data is all returned and then you can manually initialize the directive. But I havn't done that before :$ – Christopher Marshall Jul 29 '13 at 19:43

1 Answers1

1

You could always run your calculations after the last directive in the list has been rendered.

<div scrollspy>
    <a href="#" ng-repeat="item in items" class="scrollspyItem"></a>
</div>

angular.module('module').directive('scrollspyItem', function() {
    return {
        restrict: 'C',
        link: function(scope, element, attrs) {
            // do your normal directive stuff here
            if (scope.$last) {
                // this is the last item in the list
                // calculate size now
            }
        }
    };
});
Brian Lewis
  • 5,739
  • 1
  • 21
  • 28
  • Which could be perfectly viable. The purpose of the directive is to lazy load in more items once a user scrolls to the end of the div. This directive will be used on multiple elements containing data fetched from the server, establishing some implementation dependencies would be ok i guess. – ngr Jul 29 '13 at 20:05
  • Sounds like you need infinitescroll. Does this jsFiddle solve your problem? http://jsfiddle.net/vojtajina/U7Bz9/ – Brian Lewis Jul 29 '13 at 20:16
  • it is indeed a sort of infinitescroll, the only difference is that it needs to work based on the window.scrollTop compared to the bottom of the element, so no overflow and fixed height applied to the containing element. :( – ngr Jul 29 '13 at 20:24