AngularJS element.innerHTML is undefined from within directive

All we need is an easy explanation of the problem, so here it is.

Let’s say I have:

directives.directive('foo', function () {
    return {
        scope: true,
        link:function (scope, element, attr) {

            console.log('innerHTML is ' + element.innerHTML);

            scope.$watch('update', function (newValue) {
                console.log('innerHTML is... ' + element.innerHTML);


… then innerHTML is undefined. I imagine this is due to the way Angular processes the DOM. What is the right way to obtain the innerHTML?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

The element variable that is passed to your link function is a jqLite object – not a DOM object. You can obtain the DOM object with element[0] (like you could in jQuery), but jqLite provides a method for you: element.html(). Check out the docs.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply