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

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.

Thank you. Exactly what I was missing. – Robert Christian Feb 11 '13 at 0:47 — Robert Christian, Feb 11 '13 at 0:47

Happy Coding

Monday, November 9, 2015

AngularJS element.innerHTML is undefined from within directive

AngularJS element.innerHTML is undefined from within directive

1 Answer

angular validation set focus on the first invalid element