AngularJS - How do elements in ng-repeat exist before my javascript analyzes?

Question

I have several source static elements, and more dynamic elements of the same type are loaded later in an infinite scroll type situation. This works really well on my webpage without the initial static elements, but now I want to add them, because they contain really good scanned content.

My first idea was to just run my ng-repeat after this static content. This, however, will not work for my page, since there are filtering and hide / show options based on the models that I want to connect to this static content. Something like that:

<li> <a href="path/">How to jump rope</a> <p truncate-directive>This article is about jump roping lorem ispum dolor amet...</p> <a ng-show="item.admin">edit</a> </li> <li ng-repeat="item in items"> <a>{{item.title}}</a> <p truncate-directive>{{item.description}}</p> <a ng-show="item.admin">edit</a> </li> 

The second li has an attached model, and the first is not located and is not outside the model area, so I can not use angularJS to sort, filter, etc.

I don't mind writing on top of static elements with dynamic versions of myself, if that makes it easier. I just want a crawlable / static version of some elements when loading a page before parsing JavaScript.

I do not know how to do that.

Answer 1

A possible solution would be to place static content on the page manually (for example, in the first li ), and then use something like ng-hide="true" to hide the content as soon as angular parses the page. This will allow the crawlers to see the information , but this will prevent its display to users. Then just add static content to your model and let it load along with your dynamic content.

Also, thanks to check_ca for providing a link to a Google guide for creating AJAX pages !