2015-03-04 1 views
38

У меня есть рекурсивная угловая директива, которая использует переменную шаблона и скомпилируется в функции 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); 
     } 
} 

и

ответ

93

Вы можете использовать $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 (проверьте вкладку сети, чтобы увидеть один запрос сети)

+11

Это потрясающе! Ты мой герой! Могу ли я купить вам кофе? – CodyBugstein

+0

Мне любопытно, можно ли использовать html-привязку (ng-bind-html) внутри «template.html» на вашей иллюстрации? Я не могу заставить его работать. – zhekaus

+1

@zhekaus, да, но вам все равно нужно использовать обычную 'ngSanitize' /' $ sanitize' или иначе использовать '$ sce.trustAsHtml' –

2

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

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

почему? это более преформатант? делает сеть быстрее? – VeXii

+1

Вы должны кэшировать загружаемые шаблоны, такие как $ http.get ('mytem.html', {cache: $ templateCache}), затем (function (response) { element.html (response.data); $ compile (element.contents()) (scope); }) ' – Leonardo

+1

В коде отсутствует скобка, но я не могу редактировать, потому что она меньше 6 символов :) – Leonardo

 Смежные вопросы

  • Нет связанных вопросов^_^