Angularjs - Найти элемент с динамическими классами
-
20-12-2019 - |
Вопрос
Я добавляю классы, используя NG-класс, но когда я пытаюсь найти эти элементы, используя директиву, я не могу их найти.
.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');
})
.
Но это не находит элементы (выход Chrome Console):
context: div
length: 0
prevObject: o.fn.init[1]
selector: ".step.disabled"
__proto__: Object[0]
.
Процессы / Шаги / Шаги1.html:
<div>
<div toggle-box>
<div class="step" ng-class="{enabled: condition, disabled: !condition}">
...
.
И я уверен, что есть .disabled divs.
Когда я пытаюсь найти элементы, используя только $ ('. Шаг'), я могу найти их, потому что класс уже есть.
Как я могу решить это?
Вот пучок: http://plnkr.co/edit/afymqlx0wp3trffwradd?p=preview
Решение
Что мне нужно было дождаться углового времени, чтобы закончить рендуринг вида, упаковка с функцией тайм-аута $ даже с 0 разомшником.Как это:
Пример пулькатора: http://plnkr.co/edit/rcqyc4aipnlq1wthjp?p=proeview<.A>
.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');
})
. Не связан с StackOverflow