I'm currently putting together a template against a fresh scope:
var scope = _.assign($rootScope.$new(true), {
foo: 1,
bar: 2
})
var element = angular.element('<my-element foo="foo" bar="bar"></my-element>')
$compile(element)(scope)
element.appendTo(container)
Upon conducting a basic analysis, it appears that the slowest part of this code is $compile, taking approximately 1ms per compilation. I am required to compile around 100 elements concurrently as the user scrolls.
Although there are numerous optimizations possible to expedite compilations after the initial round of $compiles, my goal is to hasten the very first set of 100 compiles. Furthermore, I aim to retain the templates within Angular and refrain from injecting raw HTML.
Any suggestions?
Edit: Reposting my comment from below here for better visibility in case someone comes across this thread in the future:
It finally clicked for me. By passing a function as the second argument to $link, Angular will clone the node for you. If not, it will reuse the same node with every call to $link. In either scenario, you can access the returned node synchronously (as the return value of $link) or asynchronously (within your callback). This aspect of the API seems flawed. I have submitted an issue on Angular's tracker here - github.com/angular/angular.js/issues/11824