AngularJS element.innerHTML is undefined from within directive

Question

Let's say I have:

directives.directive('foo', function () {
    return {
        restrict:'A',
        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?

Josh David Miller · Accepted Answer · 2013-02-10 20:03:37Z

40

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.

answered Feb 10, 2013 at 20:03

Josh David Miller

121k16 gold badges129 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robert Christian Over a year ago

Thank you. Exactly what I was missing.

Collectives™ on Stack Overflow

AngularJS element.innerHTML is undefined from within directive

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related