0

I've been reading lots of question for hours on StackOverflow but still not reach the solution.

I have to add class="active" to a sibling element after DOM has finished rendering. I wrote a directive to do that and put in it $timeout() with 0 delay but it doesn't work.

Here's the code:

angular.module('test', [])
.directive('updateTextField', function(){
    return{
        link: function(scope, element, attr){
            $timeout(function(){
                var label = element.siblings('label');
                label.addClass('active');
                console.log(label); //for debugging purposes
            }, 0);
        }
    }
})

The result of console.log('label') is an element with the class active but if I inspect it directly, it hasn't class active.

Any help would be appreciated

Matteo Meil
  • 1,192
  • 10
  • 20
  • 1
    Isn't this what you are looking for? https://stackoverflow.com/questions/18646756/how-to-run-function-in-angular-controller-on-document-ready – Tim May 30 '17 at 08:20
  • Possible duplicate of [How to run function in angular controller on document ready?](https://stackoverflow.com/questions/18646756/how-to-run-function-in-angular-controller-on-document-ready) – Deblaton Jean-Philippe May 30 '17 at 08:25
  • Nope, I'm asking for directive that's different from controller so the question you posted don't resolve my problem – Matteo Meil May 30 '17 at 08:30

1 Answers1

0

If you want to add just class after DOM rendering then you could do like this

HTML:

<div id="myDiv"></div>

Controller:

angular.element(document).ready(function () {
    var id = document.getElementById('myDiv');
    id.className += "active";
});

Hope this will help!!!

the_mishra
  • 813
  • 9
  • 24