Angularjs - Trouvez l'élément avec des classes dynamiques
-
20-12-2019 - |
Question
Je ajoute des cours à l'aide de la classe NG, mais lorsque j'essaie de trouver ces éléments à l'aide de la directive, je ne suis pas capable de les trouver.
.factory('loadTemplate', function($compile) {
return function(template) {
return {
restrict: 'E',
replace: true,
templateUrl: template,
link: function(scope, el, attrs) {
console.log(el.find('.step.disabled'));
}
}
}
})
.directive('step1', function(loadTemplate) {
return loadTemplate('processes/steps/step1.html');
})
mais il ne trouve pas les éléments (Chrome Console Sortie):
context: div
length: 0
prevObject: o.fn.init[1]
selector: ".step.disabled"
__proto__: Object[0]
Processus / étapes / Step1.html:
<div>
<div toggle-box>
<div class="step" ng-class="{enabled: condition, disabled: !condition}">
...
Et je suis sûr qu'il y a des divs .disableabled.
Lorsque j'essaie de trouver les éléments en utilisant seulement $ ('. Step'), je peux les trouver, car la classe est déjà là.
Comment puis-je résoudre ce problème?
Voici un plunker: http://plnkr.co/edit/afymqlx0wp3trffwradd?p=preview
La solution
Ce dont j'avais besoin était d'attendre la finition angulaire de rendu de la vue, enveloppez-vous avec une fonction $ Timeout même avec un délai d'attente, cela fonctionnera.Comme ceci:
EXEMPLE DE PLUCKER: http://plnkr.co/edit/rcqyc4aipnlq1wtpahjp?p=preview
.factory('loadTemplate', function($timeout) {
return function(template) {
return {
restrict: 'E',
replace: true,
templateUrl: template,
link: function(scope, el, attrs) {
$timeout(function() {
$('.step.disabled').attr('border-color', '#f00');
}, 0);
}
}
}
})
.directive('step1', function(loadTemplate) {
return loadTemplate('processes/steps/step1.html');
})