将HTML模板从文件加载到AngularJs中的变量。

I'm working with a form that needs to bind HTML to a Rich Text Editor. The best way to store this HTML content would be an HTML file.

我正在处理一个需要将HTML绑定到富文本编辑器的表单。存储此HTML内容的最佳方法是HTML文件。

I can't quite figure out how to load an HTML template from a file and assign it to a variable.

我不知道如何从文件中加载HTML模板并将其分配给变量。

Directives seem to do be able to do this when working with templateUrl. Was wondering if this there is any low level api in angular to achieve the same thing inside of a controller

在使用templateUrl时，指令似乎可以做到这一点。想知道是否有任何低水平的api在角度内实现同样的东西在控制器内

2 个解决方案

#1

All templates are loaded into a cache. There is an injectable $templateCache service you can use to get access to the templates:

所有模板都被加载到缓存中。您可以使用一个可注入的$templateCache服务来访问模板:

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

#2

Using $templateRequest, you can load a template by it’s URL without having to embed it into your HTML page. If the template is already loaded, it will be taken from the cache.

使用$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's 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
    });
});

Be aware that this is the manual way to do it, and whereas in most cases the preferable way would be to define a directive that fetches the template using the templateUrl property.

请注意，这是手工方式，而在大多数情况下，更好的方法是定义一个指令，该指令使用templateUrl属性获取模板。

#1