La documentation angulaire dit: -
La compilation du DOM est effectuée par l'appel à la méthode $ compile (). La méthode traverse le DOM et correspond aux directives. Si une correspondance est trouvée, elle est ajoutée à la liste des directives associées à l'élément DOM donné. Une fois que toutes les directives pour un élément DOM donné ont été identifiées, elles sont triées par priorité et leurs fonctions compile () sont réalisé.
La directive ng-repeat, je crois, a une priorité plus faible que les directives personnalisées, dans certains cas d'utilisation comme id dynamique et directive personnalisée . angular permet-il de bricoler avec priorité des directives pour choisir l'exécution de l'une avant l'autre?
Oui, vous pouvez définir la priorité d'une directive. ng-repeat
a une priorité de 10 , qui est en fait plus élevée que les directives personnalisées (la priorité par défaut est 0). Vous pouvez utiliser ce numéro comme un guide pour savoir comment définir votre propre priorité sur vos directives par rapport à elle.
angular.module('x').directive('customPriority', function() {
return {
priority: 1001,
restrict: 'E',
compile: function () {
return function () {...}
}
}
})
priorité - Lorsqu'il y a plusieurs directives définies sur un seul élément DOM, il est parfois nécessaire de spécifier l'ordre dans lequel les directives sont appliquées. La priorité est utilisée pour trier les directives avant que leurs fonctions de compilation soient appelées. La priorité est définie comme un nombre. Les directives avec une plus grande priorité numérique sont compilées en premier. L'ordre des directives avec la même priorité n'est pas défini. La priorité par défaut est 0.
AngularJS trouve toutes les directives associées à un élément et le traite. Cette option indique angular pour trier les directives par priorité afin qu'une directive ayant une priorité plus élevée soit compilée ou liée avant les autres. La raison d'avoir cette option est que nous pouvons effectuer une vérification conditionnelle sur la sortie de la directive précédente compilée.
Dans l'exemple suivant, ajoutez d'abord le bouton et seulement après avoir ajouté class
au bouton actuel:
Démo Fiddle
App.directive('btn', function() {
return {
restrict: 'A',
priority: 1,
link: function(scope, element, attrs) {
element.addClass('btn');
}
};
});
App.directive('primary', function() {
return {
restrict: 'A',
priority: 0,
link: function(scope, element, attrs) {
if (element.hasClass('btn')) {
element.addClass('btn-primary');
}
}
};
});