angular.js element has no method querySelector

Question

I'm trying to get a child element from angular as an object in my directive, so I have

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

When I output the elem, I have an html object. However, I get an error `Object [object object] has no method 'querySelector'.

I can get the element using

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

but that outputs as

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

which isn't what I need, I need the html object of the resize-bar.

Anybody know of a good way to do this in angular?

console output of elem is

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

huang.xinghui · Accepted Answer · 2014-01-13 03:36:24Z

25

try this, the return value is element, not angular element.

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

answered Jan 13, 2014 at 3:36

huang.xinghui

5513 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

huang.xinghui Over a year ago

write a example http://plnkr.co/edit/A4w6Gd?p=preview

knrz Over a year ago

I support this answer.

D. Visser · Accepted Answer · 2015-05-22 15:00:13Z

If you want to find an element that resides within your directive's template, you can use this within your link function:

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

It will look for the #find-me id. But it will do so only within your directive's template. So, it won't return any elements with the same id outside of your directive, like document.querySelector("#find-me") would.

So, if you were to use it in a directive, it would look like this:

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

knrz · Accepted Answer · 2014-01-13 12:12:52Z

2

.querySelector() is a method of document. However, since you've got elem going, you can do this:

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

What this does is it gets the classname of the current element, then adds it to the beginning of document.querySelector so that you've got an accurate query.

So as an example, with this being applied to div.favor-layout.favor-layout-sideways, currentElemClass becomes .favor-layout.favor-layout-sideways, so in the end your you get:

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

Which is a valid query.

edited Jan 13, 2014 at 12:12

answered Jan 13, 2014 at 1:56

knrz

1,8211 gold badge12 silver badges15 bronze badges

5 Comments

pedalpete Over a year ago

Thanks, I'm trying to do this without jQuery, but might give up on that. The problem with your solution is when I put resizeBar to the console, it gives me the html string, not the object.

knrz Over a year ago

Could you paste the response of console.log(elem) in your directive?

pedalpete Over a year ago

added the console.log of elem

pedalpete Over a year ago

that's a great idea knrz, I'll take a closer look at it, but the problem I'm having is that I'll have many divs with the same group of classes and this would get them all. I'll take a look at adding an id, but I may not have a unique data related to each div to create an id from.

Mark Robson Over a year ago

querySelector is an element method so it works not just on document developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

Collectives™ on Stack Overflow

angular.js element has no method querySelector

3 Answers 3

2 Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related