Angularjs - 동적 클래스가있는 요소를 찾습니다
-
20-12-2019 - |
문제
NG-Class를 사용하여 클래스를 추가하지만 지침을 사용하여 이러한 요소를 찾으려고 할 때 나는 그 (것)들을 찾을 수 없다.
.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');
})
.
그러나 요소는 요소 (크롬 콘솔 출력)를 찾지 못합니다 :
context: div
length: 0
prevObject: o.fn.init[1]
selector: ".step.disabled"
__proto__: Object[0]
.
프로세스 / 단계 / step1.html :
<div>
<div toggle-box>
<div class="step" ng-class="{enabled: condition, disabled: !condition}">
...
.
와 DiSabled Divs가 있음을 확신합니다.
$ ( '. 단계) 만 사용하여 요소를 찾을 때, 클래스가 이미 있기 때문에 찾을 수 있습니다.
어떻게 해결할 수 있습니까?
여기 있습니다. http://plnkr.co/edit/afymqlx0wp3trffwradd?p=preview
해결책
필자가 필요 한 것은 각도가 뷰를 렌더링 할 때까지 기다릴 때까지 기다릴 때까지 0 개의 타임 아웃과도 $ Timeout 기능으로 랩핑됩니다.다음과 같이 :
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');
})
. 제휴하지 않습니다 StackOverflow