AngularJS load directive before data

Question

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.

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,

Try load directive based on array by adding ng-if as like "<tr ng-if="list.length>0" custom-tr ng-repeat='element in list'></tr>". — Immanuel Kirubaharan
– Immanuel Kirubaharan, Commented Dec 13, 2018 at 13:31
npmjs.com/package/gulp-ng-template-cache build your app with the templates built in the app.js — anotherdev
– anotherdev, Commented Dec 13, 2018 at 13:32

Cybermate · Accepted Answer · 2018-12-15 15:10:15Z

1

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!

edited Dec 15, 2018 at 15:10

answered Dec 13, 2018 at 13:41

Cybermate

1054 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

anotherdev Over a year ago

you should have answered in the comments not create an answer ;)

anotherdev Over a year ago

Nice. By adding a prebuild step in which you write in the application's script the templates it is supposed to use, you avoid useless ajax requests and the app is way faster to load.

Collectives™ on Stack Overflow

AngularJS load directive before data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related