angular.js元素有

我想從一個角度子元素在我的指導對象都沒法querySelector，所以我有angular.js元素有

 
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對象。

有人知道在角度做到這一點的好方法嗎？ 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]

來源

2014-01-13 pedalpete

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

這是一個有效的查詢。

來源

2014-01-13 01:56:10 knrz

謝謝，我想這樣做沒有jQuery的，但可能會放棄這一點。解決方案的問題是，當我將resizeBar放到控制檯時，它給了我html字符串，而不是對象。 – pedalpete

你可以在你的指令中粘貼'console.log（elem）'的響應嗎？ – knrz

添加了elem – pedalpete

試試這個，返回值是元素，而不是角元素。

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

來源

2014-01-13 03:36:24

我得到一個無法讀取屬性[0] – pedalpete

寫一個例子[http://plnkr.co/edit/A4w6Gd?p=preview](http://plnkr.co/edit/A4w6Gd?p=preview） –

我支持這個答案。 – knrz

如果你想找到駐留你的指令的模板中的元素，你可以在你的link函數中使用：

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

它會尋找#find-me ID。但是它只會在您的指令模板中這樣做。因此，它不會返回任何具有相同ID的元素，例如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>'; } } });

來源

2015-05-22 15:00:13

angular.js元素有

回答

相關問題