CODEWITHSUNDEEP
angularjs
Alex
Alex

Reputation: 6109

jqLite and element.querySelector outputs error

Hi I have newly started to look at AngularJS and jqLite and have bumped into this issue that I don't understand.

I have this directive

angular
    .module('app')
    .directive('jqLiteTest', jqLiteTest);

/* @ngInject */
function jqLiteTest () {

    return {
        scope: {},
        restrict: 'E',
        template: '<h1>Hello World</h1>',
        link: function (scope, element, attrs) {
            element.prepend('this is prepend <hr id="select-this-hr">');
            element.append('<hr> this is append');
            var hr = document.querySelector('#select-this-hr');
        }
    };

}

basically when I try to change the line above to

var hr = element.querySelector('#select-this-hr');

I get this error:

TypeError: undefined is not a function

Am I not allowed to use element instead of document? I'm lost.

Upvotes: 0

Views: 2059

Answers (1)

tasseKATT
tasseKATT

Reputation: 38490

Document.querySelector() is a function on the DOM Document.

In your example, element is a jqLite object.

You need to use the raw DOM element instead, for example:

var hr = element[0].querySelector('#select-this-hr');

Upvotes: 7

Related Questions