jqLit​​e和element.querySelector输出错误

Question

您好我已经开始关注AngularJS和jqLit​​e并且遇到了这个我不明白的问题。

我有这个指令

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');
        }
    };

}

基本上当我尝试将上面的行更改为

时

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

我收到此错误：

  

TypeError：undefined不是函数

我不允许使用元素而不是文档吗？我输了。

Answer 1

Document.querySelector()是DOM文档的一个函数。

在您的示例中，element是jqLit​​e对象。

您需要使用原始DOM元素，例如：

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