Загрузите HTML-шаблон из файла в переменную в AngularJs

Я работаю с формой, которая должна привязывать HTML к Rich Text Editor. Лучший способ сохранить этот HTML-контент - это HTML файл.

Я не могу понять, как загрузить шаблон HTML из файла и назначить его переменной.

Директивы, похоже, могут это сделать при работе с templateUrl. Интересно, есть ли у него какой-либо низкоуровневый api в angular для достижения того же самого внутри контроллера.

Ответ 1

Все шаблоны загружаются в кеш. Существует инъекционная $templateCache служба, которую вы можете использовать для доступа к шаблонам:

app.controller('testCtrl', function($scope, $templateCache){
    var template = $templateCache.get('nameOfTemplate.html');
});

Ответ 2

Используя $templateRequest, вы можете загрузить шаблон по URL-адресу без необходимости встраивать его в свою HTML-страницу. Если шаблон уже загружен, он будет выведен из кеша.

app.controller('testCtrl', function($scope, $templateRequest, $sce, $compile){
    // Make sure that no bad URLs are fetched. You can omit this if your template URL is
    // not dynamic.
    var templateUrl = $sce.getTrustedResourceUrl('nameOfTemplate.html');

    $templateRequest(templateUrl).then(function(template) {
        // template is the HTML template as a string

        // Let put it into an HTML element and parse any directives and expressions
        // in the code. (Note: This is just an example, modifying the DOM from within
        // a controller is considered bad style.)
        $compile($("#my-element").html(template).contents())($scope);
    }, function() {
        // An error has occurred
    });
});

Помните, что это ручной способ сделать это, и в большинстве случаев предпочтительным способом будет define a directive, который извлекает шаблон с использованием свойства templateUrl.