0

I have an SPA that retrieves potentially large amounts of data form elastic using an Angular http get and renders into a pane on the page. The problem I have is that I have some fancy scroll bars using jquery that dont work properly if the complete response from the http get hasn't been received before the jquery $(document).ready function is called. For smaller data sets, there is no issue, it's just larger data sets.

I've found a partial solution which is to introduce a setTimeout to the jquery $(document).ready function, however this is not very elegant and I don't want to always have a delay unless required.

Is there a way to call jquery $(document).ready from angular once I have received all of an http respose? Or is there another Angular function I could call?

Improve this question
4
  • 1
    document.ready is virtually useless in angular apps.... use directives to manage dom code Commented Jul 19, 2016 at 14:01
  • What are you doing in your $(document).ready handler? Why do you need it? Also, beyond being just inelegant, a setTimeout will only sweep the problem under the rug and will not deterministically solve it. It will be a flaky solution that will let the issue reoccur the moment there are some unexpected lag or CPU spikes. Commented Jul 19, 2016 at 14:04
  • Yeah, I totally agree. I am using template that the company likes the styling of and then inserting the angular data into it. One of the things in the template are some jquery scroll bars, that initialize when document.ready get called, however the document is not actually ready as it's waiting on angular to retrieve all of the response. Commented Jul 19, 2016 at 14:10
  • In my concept use jquery with angular will never be the best approach. I know that have a lot of plugins that work only with jquery, so if you really need it, maybe the best way is find a similar plugin for angular. Commented Jul 19, 2016 at 14:15

2 Answers 2

Reset to default
1

It seems that your issue is that, you want to know when ng-repeat has finished rendering the DOM. I think this post can help you.

It says creating a directive which will invoke a function on DOM ready:

var module = angular.module('testApp', [])
    .directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit(attr.onFinishRender);
                });
            }
        }
    }
});

With html that looks something like this:

<div ng-repeat="item in items" on-finish-render="ngRepeatFinished">
    <div>{{item.name}}}<div>
</div>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Using angular-route in combination with resolvement gives you the possiblity to wait for specific promise response before the route is 'rendered'.

When your application route is dependend on 'init' data, best to use these resolvements.

resolve - {Object.=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. If all the promises are resolved successfully, the values of the resolved promises are injected and $routeChangeSuccess event is fired. If any of the promises are rejected the $routeChangeError event is fired. For easier access to the resolved dependencies from the template, the resolve map will be available on the scope of the route, under $resolve (by default) or a custom name specified by the resolveAs property (see below). This can be particularly useful, when working with components as route templates.

More information here

Using Resolve In AngularJS Routes

Improve this answer

1 Comment

Thanks, I'm using ExpressJS for the routing, so this may not work for me.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.