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?

Solution

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.

Comments

[Robert Christian]

Thank you. Exactly what I was missing.