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

Question

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

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

Когда я вывести elem, у меня есть объект HTML , Однако я получаю сообщение об ошибке `Object [object object] не имеет метода 'querySelector'.

я могу получить элемент, используя

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

но выходы в

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

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

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

консоль выход эля является

 
: 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] 

Answer 1

.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"); 

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

Answer 2

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

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

Answer 3

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

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

Он будет искать #find-me ид. Но это сделает только в вашей директиве template. Таким образом, он не будет возвращать элементы с одинаковым идентификатором вне вашей директивы, например 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>'; 
     } 
    } 
});