Angular js load template into templateCache using template url

Question

I'm trying to load a template into $templateCache in the module's run block as follows.

angular.module('myapp').run(function($http, $templateCache, $timeout) {
    var templateLocation = 'location/to/template.html';
    $http.get(templateLocation).them(function(response) {
        $templateCache.put(templateLocation, response.data);
    )};
}

This loads the template into templateCache. However, when I try to use it in a directive. It doesn't load because the directive loads before the $http promise gets resolved.

Here is the code for directive

angular.module('myApp').directive('myDirective, directiveFn);
directiveFn.$inject = ["$templateCache"]

function directiveFn($templateCache) {
    var templateLocation = 'location/to/template.html';
    return {
        restrict: 'EA'
        scope: {
            thing1: "="
        }
        template: $templateCache.get(templateLocation)
    }
}

Is there a better way/place to do this?

Answer 1

How about using $templateRequest in your directive? I use this to load a template when the directive is initiated and this allows me to use the templates HTML within the directive.

I am using Typescript and my $templateRequest is a dependency on my directive class, that's why it is in the this scope. this.$templateRequest( 'client/lib/directives/aTemplate.html' ).then( ( html ) => { ... do something } );

A quick look tells me that you can also use it with templatecache. This thread discusses some of that: https://github.com/angular/angular.js/issues/10630