Angular.js элемент не имеет метода querySelector

Я пытаюсь получить дочерний элемент из angular в качестве объекта в моей директиве, поэтому у меня есть

link: function(scope,elem,attrs){
    var resizeBar = elem.querySelector('.resize-bar');

Когда я вывожу elem, у меня есть объект html. Тем не менее, я получаю сообщение об ошибке "Объект [объект объекта] не имеет метода" querySelector ".

Я могу получить элемент с помощью

   var resizeBar = elem.children().children()[1];

но выводится как

<div class="resize-bar">Move</div>

который не то, что мне нужно, мне нужен html-объект панели изменения размера.

Кто-нибудь знает хороший способ сделать это в angular?

консольный вывод elem -

: div.favor-layout.favor-layout-sideways
accessKey: ""
align: ""
attributes: NamedNodeMap
baseURI: "file:///C:/Users/pete/projects/favor/favor-layout/index.html"
childElementCount: 1
childNodes: NodeList[2]
children: HTMLCollection[1]
classList: DOMTokenList
className: "favor-layout favor-layout-sideways"
clientHeight: 200
clientLeft: 0
clientTop: 0
clientWidth: 913
contentEditable: "inherit"
dataset: DOMStringMap
dir: ""
draggable: false
firstChild: div.favor-layout-container
firstElementChild: div.favor-layout-container
hidden: false
id: ""
innerHTML: "↵   ↵          This gets wrapped.↵     ↵ move↵↵"
innerText: "This gets wrapped.↵move"
isContentEditable: false
lang: ""
lastChild: text
lastElementChild: div.favor-layout-container
localName: "div"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: text
nodeName: "DIV"
nodeType: 1
nodeValue: null
offsetHeight: 200
offsetLeft: 8
offsetParent: body.ng-scope
offsetTop: 8
offsetWidth: 913
onabort: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onprogress: null
onratechange: null
onreset: null
onscroll: null
onsearch: null
onseeked: null
onseeking: null
onselect: null
onselectstart: null
onshow: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
onvolumechange: null
onwaiting: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwheel: null
outerHTML: "↵   ↵          This gets wrapped.↵     ↵ move↵↵"
outerText: "This gets wrapped.↵move"
ownerDocument: document
parentElement: body.ng-scope
parentNode: body.ng-scope
prefix: null
previousElementSibling: null
previousSibling: text
scrollHeight: 200
scrollLeft: 0
scrollTop: 0
scrollWidth: 913
spellcheck: true
style: CSSStyleDeclaration
tabIndex: -1
tagName: "DIV"
textContent: "↵ ↵           This gets wrapped.↵     ↵   move↵↵"
title: ""
translate: true
webkitPseudo: ""
webkitShadowRoot: null
webkitdropzone: ""
__proto__: HTMLDivElement
context: div.favor-layout.favor-layout-sideways
length: 1
__proto__: Object[0]

Ответ 1

попробуйте это, возвращаемое значение - это элемент, а не элемент angular.

var resizeBar = elem[0].querySelector('.resize-bar');

Ответ 2

Если вы хотите найти элемент, который находится в внутри вашего шаблона директивы, вы можете использовать его в своей функции link:

var divElement = angular.element(element[0].querySelector('#find-me'));

Он будет искать идентификатор #find-me. Но это будет сделано только в вашей директиве . Таким образом, он не будет возвращать элементы с одним и тем же идентификатором вне вашей директивы, например document.querySelector("#find-me").

Итак, если бы вы использовали его в директиве, это выглядело бы так:

angular.module('app').directive('myDirective', function(){
    return{
        link: function(scope, element, attributes){
            var divElement = angular.element(element[0].querySelector('#find-me'));
        },
        template: function(element, attributes){
            return '<div id="find-me">' +
                        'Look at my directive' +
                    '</div>';
        }
    }
});

Ответ 3

.querySelector() является методом document. Однако, поскольку у вас есть elem, вы можете сделать это:

var currentElemClass = "." + elem.className.replace(/\s/g, ".") + " ";
var resizeBar = document.querySelector(currentElemClass + ".resize-bar");

Что это значит, он получает имя класса текущего элемента, а затем добавляет его в начало document.querySelector, чтобы получить точный запрос.

Итак, в качестве примера, при применении к div.favor-layout.favor-layout-sideways, currentElemClass становится .favor-layout.favor-layout-sideways, поэтому в конце вы получите:

document.querySelector(".favor-layout.favor-layout-sideways .resize-bar");

Каков действительный запрос.