我正在尝试将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>
这不是我需要的,我需要resize-bar的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]
答案 0 :(得分:25)
试试这个,返回值是元素,而不是角度元素。
var resizeBar = elem[0].querySelector('.resize-bar');
答案 1 :(得分:8)
如果您想在指令的模板中找到 中的元素,可以在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>';
}
}
});
答案 2 :(得分:2)
.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");
哪个是有效查询。