How to check if $compile has been completed?

Question

I am writing a function that can create an email template from a HTML template and some information that is given. For this I am using the $compile function of Angu

Answer 1

$compile is synchronous function. It just compiles given DOM synchronously and doesn't care about what's going on in nested directives. If nested directives have asynchronously loaded templates or other things that prevents their content from being available on the same tick, this is not a concern for parent directive.

Due to how data binding and Angular compiler work, there's no distinct moment when DOM can be considered certainly 'complete', because changes may occur in every place, any time. ng-include may involve bindings too, and included templates may be changed and loaded at any moment.

The actual problem here is the decision that didn't take into account how this will be managed later. ng-include with random template is ok for prototyping but will lead to design problems, and this is one of them.

One way to handle this situation is to add some certainty on which templates are involved; well-designed application cannot afford to be too loose on its parts. The actual solution depends on where this template originates from and why it contains random nested templates. But the idea is that used templates should be put to template cached before they will be used. This can be done with build tools like gulp-angular-templates. Or by doing requests prior to ng-include compilation with $templateRequest (which essentially does $http request and puts it to $templateCache) - doing $templateRequest is basically what ng-include does.

Although $compile and $templateRequest are synchronous when templates are cached, ng-include is not - it becomes fully compiled on the next tick, i.e. $timeout with zero delay (a plunk):

var templateUrls = ['foo.html', 'bar.html', 'baz.html'];

$q.all(templateUrls.map(templateUrl => $templateRequest(templateUrl)))
.then(templates => {
  var fooElement = $compile('
')($scope);

  $timeout(() => {
   console.log(fooElement.html());
  })
});

Generally putting templates in use to cache is the preferable way to get rid of asynchronicity that Angular templates bring to compilation lifecycle - not only for ng-include but for any directives.

Another way is to use ng-include events. This way the application becomes more loose and event based (sometimes it is a good thing but most times it's not). Since each ng-include emits an event, the events need to be counted, and when they are, this means that a hierarchy of ng-include directives has been completely compiled (a plunk):

var includeCounts = {};

var fooElement = $compile('
')($scope);

$scope.$on('$includeContentRequested', (e, currentTemplateUrl) => {
  includeCounts[currentTemplateUrl] = includeCounts[currentTemplateUrl] || 0;
  includeCounts[currentTemplateUrl]++;
})
// should be done for $includeContentError as well
$scope.$on('$includeContentLoaded', (e, currentTemplateUrl) => {
  includeCounts[currentTemplateUrl]--;

  // wait for a nested template to begin a request
  $timeout(() => {
    var totalCount = Object.keys(includeCounts)
    .map(templateUrl => includeCounts[templateUrl])
    .reduce((counts, count) => counts + count);

    if (!totalCount) {
      console.log(fooElement.html());
    }
  });
})

Notice that both options will only handle asynchronicity that is caused by asynchronous template requests.