web-dev-qa-db-fra.com

Utilisation de $ compile sur un modèle externe (templateURL) dans Angular

J'ai une directive récursive Angular angulaire qui utilise une variable de modèle et est compilée dans la fonction link.

Le problème est que mon modèle est devenu très long et incontrôlable et que je souhaite l'externaliser dans un fichier HTML externe (cela faciliterait également par exemple l'auto-indent).

Comment pouvez-vous charger un modèle externe dans une directive pouvant être utilisée à l'intérieur de la $compile?

J'ai vu templateURL, mais cela ne me permet pas de nommer la variable et de la transmettre à la $compile une fonction.

var template = 
           "<p>My template</p>"+
           "<this-directive val='pass-value'></this-directive>";

return {
     scope: {
     ...
     },
     ...
     link: function(scope, element){
            element.html(template);
            $compile(element.contents())(scope);
        }
}

et

angularjstemplatesangularjs-directiveexternal
47
CodyBugstein

Vous pouvez utiliser le $templateRequest service pour obtenir le modèle. C’est un service pratique qui met également le modèle en cache dans $templateCache, de sorte qu’une seule demande à template.html est fait.

À titre d’illustration (et sans entrer dans la question des directives récursives), ceci est utilisé comme suit:

link: function(scope, element){
   $templateRequest("template.html").then(function(html){
      var template = angular.element(html);
      element.append(template);
      $compile(template)(scope);
   });
};

plunker (consultez l'onglet réseau pour voir une requête réseau unique)

104
New Dev

Je préfère utiliser $ http pour charger le modèle si sa taille est plus grande: -

$http.get('mytemp.html').then(function(response) {
            element.html(response.data);
            $compile(element.contents())(scope);
            });
3
squiroid