Angularjs - encontre elemento com classes dinâmicas
-
20-12-2019 - |
Pergunta
Estou adicionando classes usando ng-class, mas quando tento encontrar esses elementos usando diretiva, não consigo encontrá-los.
.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');
})
Mas não encontra os elementos (saída do console do Chrome):
context: div
length: 0
prevObject: o.fn.init[1]
selector: ".step.disabled"
__proto__: Object[0]
processos/etapas/passo1.html:
<div>
<div toggle-box>
<div class="step" ng-class="{enabled: condition, disabled: !condition}">
...
E tenho certeza de que existem divs .disabled.
Quando tento encontrar os elementos usando apenas $('.step'), consigo encontrá-los, pois a classe já está lá.
Como posso resolver isso?
Aqui está um Plunker: http://plnkr.co/edit/AFYMqLx0wP3tRFFWrADd?p=preview
Solução
O que eu precisava era esperar que o Angular terminasse de renderizar a visualização, agrupando com uma função $timeout mesmo com um tempo limite 0, ele funcionaria.Assim:
Exemplo de Plunker: 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');
})
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow