CODEWITHSUNDEEP
angularjs
Cybermate
Cybermate

Reputation: 105

AngularJS load directive before data

I have a question about the custom directives in AngularJS.

I have a list in my scope, a list of objects that I use to create tr lines in a table with ng-repeat. The tr line is a custom directive.

I have something like :

<tr custom-tr ng-repeat='element in list'></tr>

As the list is populated via an HTTP call, the list is populated little by little as I have a foreach for each result in my JSON response :

promise.then(function(json) {
  json.data.foreach(function(response) {
      other_promise.then(funtion(element) {
        $scope.list.push(element);
    })
  })

})

So as the $scope.list gets new elements little by little, my table is supposed to display a new line each time, but actually it waits the end of the foreach before rendering the TR.

When I look at the network tab of the inspector I notice that the HTML template of the tr line is loaded AFTER all the promises.

Network inspector

Is there a way to pre-load the template so I can see the lines in my table before all the promises are done ? Or should I do that differently?

Thanking you in advance,

Upvotes: 0

Views: 53

Answers (1)

Cybermate
Cybermate

Reputation: 105

About the first solution (ng-if), I thought about it some time ago but even if the list is not empty (at least one element), it doesn't mean the html template is loaded as it is loaded at the very end. You can have 35 element, if all the promises are not done it won't work.

I tried the second solution with a similar NPM package and it seems to work now.

Thank you!

Upvotes: 1

Related Questions