Использование компиляции $на внешнем шаблоне (templateURL) в директиве Angular

У меня есть рекурсивная директива Angular, которая использует переменную шаблона и компилируется в функции link.

Проблема в том, что мой шаблон получил очень много времени и вышел из-под контроля, и я хочу его экстерналировать во внешнем HTML файле (это также облегчило бы, например, автоматический отступ).

Как вы можете загрузить внешний шаблон в директиву, которая может использоваться внутри $compile?

Я видел templateURL, но это не позволяет мне называть переменную и передавать ее функции $compile.

var template = 
           "<p>My template</p>"+
           "<this-directive val='pass-value'></this-directive>";

return {
     scope: {
     ...
     },
     ...
     link: function(scope, element){
            element.html(template);
            $compile(element.contents())(scope);
        }
}

и

Ответ 1

Вы можете использовать службу $templateRequest для получения шаблона. Это служба удобства, которая также кэширует шаблон в $templateCache, так что делается только один запрос template.html.

В качестве иллюстрации (и не затрагивая вопрос о рекурсивных директивах) это используется так:

link: function(scope, element){
   $templateRequest("template.html").then(function(html){
      var template = angular.element(html);
      element.append(template);
      $compile(template)(scope);
   });
};

plunker (проверьте вкладку сети, чтобы увидеть один сетевой запрос)

Ответ 2

Я предпочитаю использовать $http для загрузки шаблона, если его размер больше: -

$http.get('mytemp.html').then(function(response) {
            element.html(response.data);
            $compile(element.contents())(scope);
            });