À l'aide de $compilation sur externe modèle (templateURL) dans Angulaire de la directive
J'ai une récursif Angulaire de la directive qui utilise une variable de modèle et sera compilé dans le link
fonction.
Problème, c'est que mon modèle a obtenu très long et hors de contrôle et je veux extérioriser dans un fichier HTML externe (il serait aussi plus facile par exemple de l'auto-indentation).
Comment pouvez-vous vous charger un externe modèle dans une directive qui peut être utilisé à l'intérieur de la $compile
?
J'ai vu templateURL
, mais qui ne me laisse pas le nom de la variable et le passer à la $compile
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
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser le
$templateRequest
service pour obtenir le modèle. C'est une facilité de service qui met également en cache le modèle dans$templateCache
, de sorte qu'une seule demande pourtemplate.html
est faite.Comme une illustration (et sans entrer dans la question de récursive directives), il est utilisé comme suit:
plunker (consultez l'onglet réseau pour voir une demande de réseau unique)
ngSanitize
/$sanitize
ou autrement utiliser$sce.trustAsHtml
Je préfère utiliser $http pour charger un modèle si sa taille est plus grande:-
$http.get('mytem.html', {cache: $templateCache}).then(function(response) { element.html(response.data); $compile(element.contents())(scope); })
$templateCache
utilise$http
d'effectuer d'autres opérations en une seule ligne. La seule différence que je vois est que le modèle n'est pas mis en$templateCache
, c'était le but de votre code?