JQuery not detecting DOM elements inside angular directive

Question

I have an angular directive with a linked template which has a simple code block

<div>
  <h1 class="dfaded">Hello World</h1>
</div>

Now at the end of my index.html file I am putting a Javascript Function

<script>
$(document).ready(function () {
    $('.dfaded').addClass("ahidden").viewportChecker({
        classToAdd: 'avisible animated fadeIn',
        offset: 100
    });
});
</script>

But this function doesn't work. On further debugging , even if I put a simple function like

$('.dfaded').hide();

It is still not working. Now if I put this HTML block OUTSIDE the directive - everything works fine. So most probably JQuery is not recognizing the DOM elements which I put inside the Angular Directive.

I have added the jquery files after all the directive files have been loaded in the HTML page. Any help would be really appreciated.

Answer 1

Your jQuery script runs before Angular processes and renders template file. This is one of the reasons why you should not work with jQuery in Angular project the way you are used to.

In order to make it work properly wrap the viewportChecker plugin initialization into custom directive. It can look for example like this:

app.directive('viewportChecker', function() {
    return {
        link: function(scope, element) {
            element.addClass("ahidden").viewportChecker({
                classToAdd: 'avisible animated fadeIn',
                offset: 100
            });
        }
    };
});

Then you would attach this directive to necessary tag:

<div>
    <h1 class="dfaded" viewport-checker>Hello World</h1>
</div>