Charger le modèle HTML du fichier dans une variable dans AngularJs

Question

Je travaille avec un formulaire qui doit lier HTML à un éditeur de texte enrichi. La meilleure façon de stocker ce contenu HTML serait un fichier HTML.

Je n'arrive pas à comprendre comment charger un modèle HTML à partir d'un fichier et l'affecter à une variable.

Les directives semblent pouvoir faire cela en travaillant avec templateUrl. Je me demandais si il y a un api de bas niveau dans l'angle pour obtenir la même chose à l'intérieur d'un contrôleur

Answer 1

Tous les modèles sont chargés dans un cache. Il y a un service $templateCache injectable vous pouvez utiliser pour accéder aux modèles:

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

Answer 2

En utilisant $templateRequest, vous pouvez charger un modèle par son URL sans avoir à l'intégrer dans votre page HTML. Si le modèle est déjà chargé, il sera extrait du cache.

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 
    }); 
}); 

Soyez conscient que c'est le moyen manuel pour le faire, et que dans la plupart des cas, la voie serait préférable de define un directive qui va chercher le modèle en utilisant la propriété templateUrl.