AngularJS $компилирует HTML из шаблонаURL

Существует следующий способ динамического добавления HTML в AngularJS

   var template = '<div>{{value}}</div>';
   var element = angular.element(template);
   placeholder.replaceWith(element);
   $compile(element)($scope);

Можно ли сделать то же самое от шаблонаURL или загрузить шаблон отдельно? (со стандартным механизмом, так что он кэшируется в $templateCache)

ОТВЕТЫ

Ответ 1

Конечно, вы просто используете сервис $http для извлечения шаблона и компиляции и вставки его вручную. Служба $http будет выполнять кэширование неявно.

PLUNKER

(Простейшая):

app.directive('message', [
  '$http',
  '$compile',
  function($http, $compile) {
    var tpl = "template.html";

    return {
      scope: true,
      link: function(scope, element, attrs){
        scope.message = attrs.message;

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

  }
]);

Вид:

<span message="Hi World!"></span>
<span message="My name is Angular."></span>

Шаблон директивы (template.html):

<span>{{message}}</span>