angular.js元素没有方法querySelector [英] angular.js element has no method querySelector

问题描述

我想从一个角度子元素在我的指令的对象，所以我有

链接：功能（范围，ELEM，ATTRS）{
    VAR resizeBar = elem.querySelector（'调整吧。'）;

当我输出 ELEM ，我有一个HTML对象。
但是，我得到一个错误`对象[对象对象]没有方法'querySelector。

我可以用得到的元素

   VAR resizeBar = elem.children（）儿童（）[1]。

但作为输出

 ＆LT; D​​IV CLASS =调整大小酒吧＆GT;移动和​​LT; / DIV＆GT;
 

这是不是我需要什么，我需要调整大小酒吧的HTML对象。

任何人都知道的一个很好的方式角度做到这一点？

ELEM的控制台输出

：div.favor-layout.favor布局，横盘整理
ACCESSKEY：
调整：
属性：的NamedNodeMap
基本URI：文件：/// C：/Users/pete/projects/favor/favor-layout/index.html
childElementCount：1
子节点：节点列表[2]
孩子：的HTMLCollection [1]
班级列表：DOMTokenList
产品类别：忙布局有利于布局，侧身
clientHeight：200
clientLeft：0
clientTop：0
clientWidth：913
CONTENTEDITABLE：继承
数据：DOMStringMap
DIR：
可拖动：假的
则firstChild：div.favor布局容器
firstElementChild：div.favor布局容器
隐藏：假的
ID： 
innerHTML的：↵↵这得到wrapped.↵↵move↵↵
innerText属性：这得到wrapped.↵move
isContentEditable：假的
郎咸平：
lastChild：文本
lastElementChild：div.favor布局容器
的localName：格
的namespaceURI：http://www.w3.org/1999/xhtml
nextElementSibling：空
nextSibling：文本
节点名称：DIV
节点类型：1
的nodeValue：空
的offsetHeight：200
offsetLeft：8
offsetParent：body.ng范围的
的offsetTop：8
offsetWidth：913
onabort：空
onbeforecopy当选：空
onbeforecut当选：空
onbeforepaste：空
的onblur：空
oncancel：空
oncanplay：空
oncanplaythrough：空
的onchange：空
的onclick：空
的OnClose：空
oncontextmenu：空
oncopy：空
oncuechange：空
oncut：空
onfocus此：空
ondrag当：空
ondragend：空
ondragenter：空
ondragleave：空
ondragover：空
ondragstart：空
ondrop：空
ondurationchange：空
onemptied：空
onended：空
onError的：空
聚焦状态：空
oninput：空
oninvalid：空
的onkeydown：空
安其preSS：空
的onkeyup：空
onload事件：空
onloadeddata：空
onloadedmetadata：空
onloadstart：空
onmousedown事件：空
OnMouseEnter在：空
OnMouseLeave在：空
的OnMouseMove：空
的onmouseout：空
的onmouseover：空
onmouseup：空
onmousewheel：空
onpaste：空
的onPause：空
onplay：空
onplaying：空
onprogress：空
onratechange：空
onreset：空
onscroll：空
onsearch：空
onseeked：空
onseeking：空
ONSELECT：空
得到聚焦：空
OnShow中：空
onstalled：空
的onsubmit：空
onsuspend：空
ontimeupdate：空
onvolumechange：空
onwaiting：空
onwebkitfullscreenchange：空
onwebkitfullscreenerror：空
onwheel：空
outerHTML：↵↵这得到wrapped.↵↵move↵↵
outerText：这得到wrapped.↵move
ownerDocument：文件
parentElement：body.ng范围的
parentNode：body.ng范围的
preFIX：空
previousElementSibling：空
previousSibling：文本
scrollHeight属性：200
scrollLeft：0
scrollTop的：0
scrollWidth：913
拼写检查：真
风格：的CSSStyleDeclaration
的tabIndex：-1
标签名：DIV
的textContent：↵↵这得到wrapped.↵↵move↵↵
标题：
翻译：真
webkitPseudo：
webkitShadowRoot：空
webkitdropzone：
__proto__：HTMLDivElement
背景：div.favor-layout.favor布局，横盘整理
长度：1
__proto__：对象[0]

解决方案

试试这个，返回值的元素，没有棱角的元素。

  VAR resizeBar = ELEM [0] .querySelector（'调整吧。'）;
 

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]

解决方案

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

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

这篇关于angular.js元素没有方法querySelector的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！