Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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.

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

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

share|improve this question

2 Answers 2

up vote 11 down vote accepted

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

app.controller('testCtrl', function($scope, $templateCache){
    var template = $templateCache.get('nameOfTemplate.html');
});
share|improve this answer
    
This seems to work if the template is defined inline using <script type="text/ng-template" id="templateId.html">, but not for files on the server. BUT - that's good enough. I'll wait for a couple of hours to see if there's a more comprehensive answer, else mark this one –  Abhinav Gujjar Jun 30 '14 at 18:19
1  
How did you want to fetch your templates? You can also do <script type="text/ng-template" id="templateId.html" src="server/path/to/your/template.html"></script> . Or you can use the $http service to manually fetch the templates and use $templateCache.put to store them. –  dustyrockpyle Jun 30 '14 at 18:38
    
ok - perfect. This covers the scenario I was looking for. Thanks! –  Abhinav Gujjar Jun 30 '14 at 20:06

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.

app.controller('testCtrl', function($scope, $templateRequest, $sce, $compile){
    // Make sure that no bad URLs are fetched. If you have a static string like in this
    // example, you might as well omit the $sce call.
    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 preferrable way would be to define a directive that fetches the template using the templateUrl property.

share|improve this answer
    
You are missing a } before the second last ); –  Blauesocke May 31 at 13:58

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.