Lors de la prise de quelque chose comme cela, la meilleure solution est une récursif de la directive. Toutefois, lorsque vous effectuez une telle directive-vous que AngularJS pénètre dans une boucle sans fin.
La solution pour cela est de laisser la directive supprimer l'élément au cours de la compilation de l'événement, et de compiler manuellement et de les ajouter dans le lien des événements.
J'ai trouvé à ce sujet dans ce fil, et une abstraction de cette fonctionnalité dans un service.
module.factory('RecursionHelper', ['$compile', function($compile){
return {
/**
* Manually compiles the element, fixing the recursion loop.
* @param element
* @param [link] A post-link function, or an object with function(s) registered via pre and post properties.
* @returns An object containing the linking functions.
*/
compile: function(element, link){
// Normalize the link parameter
if(angular.isFunction(link)){
link = { post: link };
}
// Break the recursion loop by removing the contents
var contents = element.contents().remove();
var compiledContents;
return {
pre: (link && link.pre) ? link.pre : null,
/**
* Compiles and re-adds the contents
*/
post: function(scope, element){
// Compile the contents
if(!compiledContents){
compiledContents = $compile(contents);
}
// Re-add the compiled contents to the element
compiledContents(scope, function(clone){
element.append(clone);
});
// Call the post-linking function, if any
if(link && link.post){
link.post.apply(null, arguments);
}
}
};
}
};
}]);
Avec ce service, vous pouvez facilement faire un arbre de la directive (ou d'autres récursive directives). Voici un exemple d'un arbre de la directive:
module.directive("tree", function(RecursionHelper) {
return {
restrict: "E",
scope: {family: '='},
template:
'<p>{{ family.name }}</p>'+
'<ul>' +
'<li ng-repeat="child in family.children">' +
'<tree family="child"></tree>' +
'</li>' +
'</ul>',
compile: function(element) {
return RecursionHelper.compile(element);
}
};
});
Voir ce Plunker pour une démo.
J'aime cette solution meilleure, parce que:
- Vous n'avez pas besoin d'une directive spéciale qui rend votre html moins propre.
- La récursivité est la logique disparaît dans le RecursionHelper service, afin de vous garder vos directives propres.
Mise à jour: Ajout du support pour une mesure de relier les fonctions.
