Find element with dynamic class with ng-class

Question

Find element with dynamic class with ng-class

Navigation

#1 by (2 votes)

2

I'm adding classes using ng-class , but when I try to find this element starting from a directive, I can not find them.

Link to a plunker with example code: link

.directive('step1', function(loadTemplate) {
    return {
      link: function(scope, el, attrs) {
        console.log(el.find('.step.disabled'));
      }
    }
})

Chrome console output:

context: div
length: 0
prevObject: o.fn.init[1]
selector: ".step.disabled"
__proto__: Object[0]

processes / steps / step1.html:

<div>
  <div toggle-box>
    <div class="step" ng-class="{enabled: condition, disabled: !condition}">
...

When I try to find the elements with only $('.step') I can find them, since the class is already there from the beginning (see plunker).

How can I resolve this?

javascript angularjs angularjs-directives

asked by anonymous 25.02.2014 / 23:15

1 answer

Remove old key from known_hosts (Warning: Possible DNS Spoofing detected) Reduce FireBird memory consumption when closing Dataset

score 2 · Accepted Answer

The solution to your problem is to wait for the Angular to finish rendering the view.

For example, if you use $ timeout even with a 0 sec delay you get the expected result. plunker example

.directive('scrollLeft', function($timeout) {
  return {
    link: function(scope, el, attrs) {
      $timeout(function () {
        $('.step.disabled').css('background-color', '#f00');
      }, 0); //mesmo com 0 segundos já server para esperar o template renderizar 
    }
  }
});

Another solution would be to pass the html as the template of your directive to be compiled at the directive's runtime. template example