angular.js l'élément n'a pas de méthode querySelector

Je vais essayer d'obtenir un élément enfant de anguleux comme un objet dans ma directive, j'ai donc

lien: function(champ d'application,elem,attrs){ 
var resizeBar = elem.querySelector('.redimensionner-bar');

Quand je l'ai sortie de la elem, j'ai un objet html.
Cependant, je reçois un message d'erreur `Objet [object object] n'a pas de méthode 'querySelector'.

Je peux obtenir l'élément à l'aide de

 var resizeBar = elem.les enfants().enfants (les)[1];

mais que les sorties

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

ce qui n'est pas ce dont j'ai besoin, j'ai besoin de l'objet html, de les redimensionner-bar.

Quelqu'un connais un bon moyen de le faire dans angulaire?

sortie de la console de elem est

: div.faveur-mise en page.faveur-mise en page-côté 
accessKey: "" 
aligner: "" 
attributs: NamedNodeMap 
baseURI: "file:///C:/Users/pete/projects/favor/favor-layout/index.html" 
childElementCount: 1 
childNodes: NodeList[2] 
enfants: HTMLCollection[1] 
classList: DOMTokenList 
className: "favoriser la mise faveur-mise en page-sur le côté" 
clientHeight: 200 
clientLeft: 0 
clientTop: 0 
clientWidth: 913 
contentEditable: "hériter" 
dataset: DOMStringMap 
dir: "" 
draggable: faux 
firstChild: div.faveur-mise en page-conteneur 
firstElementChild: div.faveur-mise en page-conteneur 
caché: faux 
id: "" 
innerHTML: "↵ ↵ Cela s'amalgament.↵ ↵ déplacer↵↵" 
innerText: "Cela s'amalgament.↵déplacer" 
isContentEditable: faux 
lang: "" 
lastChild: texte 
lastElementChild: div.faveur-mise en page-conteneur 
localName: "div" 
namespaceURI: "http://www.w3.org/1999/xhtml" 
nextElementSibling: null 
nextSibling: texte 
nodeName: "DIV" 
nodeType: 1 
nodeValue: null 
offsetHeight: 200 
offsetLeft: 8 
offsetParent: corps.ng-portée 
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: "↵ ↵ Cela s'amalgament.↵ ↵ déplacer↵↵" 
outerText: "Cela s'amalgament.↵déplacer" 
ownerDocument: document 
parentElement: corps.ng-portée 
parentNode: corps.ng-portée 
préfixe: null 
previousElementSibling: null 
previousSibling: texte 
scrollHeight: 200 
scrollLeft: 0 
scrollTop: 0 
scrollWidth: 913 
correction orthographique: vrai 
style: objet CSSStyleDeclaration 
tabIndex: -1 
tagName: "DIV" 
textContent: "↵ ↵ Cela s'amalgament.↵ ↵ déplacer↵↵" 
titre: "" 
traduire: vrai 
webkitPseudo: "" 
webkitShadowRoot: null 
webkitdropzone: "" 
__proto__: HTMLDivElement 
contexte: div.faveur-mise en page.faveur-mise en page-côté 
longueur: 1 
__proto__: Object[0]

OriginalL'auteur pedalpete | 2014-01-13

  1. 24

    essayer cela, la valeur de retour est l'élément, pas angulaire de l'élément.

    var resizeBar = elem[0].querySelector('.resize-bar');
    Je reçois un ne peut pas lire la propriété de [0]
    écrire un exemple http://plnkr.co/edit/A4w6Gd?p=preview
    Je soutiens cette réponse.
    ce travail pour moi merci 😀

    OriginalL'auteur huang.xinghui

  2. 8

    Si vous voulez trouver un élément qui se trouve dans votre directive du modèle, vous pouvez l'utiliser au sein de votre link fonction:

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

    Il va chercher le #find-me id. Mais il n'en sera ainsi que au sein de votre directive modèle. Donc, il ne retourne pas tous les éléments avec le même id à l'extérieur de votre directive, comme document.querySelector("#find-me") serait.

    Donc, si vous l'utilisez dans une directive, il devrait ressembler à ceci:

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

    OriginalL'auteur D. Visser

  3. 2

    .querySelector() est une méthode de document. Cependant, puisque vous avez elem, vous pouvez faire ceci:

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

    Ce que ce n'est qu'il obtient le nom de classe de l'élément en cours, puis l'ajoute au début de document.querySelector de sorte que vous avez une requête précise.

    Ainsi, à titre d'exemple, avec ce qui est appliquée à div.favor-layout.favor-layout-sideways, currentElemClass devient .favor-layout.favor-layout-sideways, donc à la fin de votre, vous bénéficiez de:

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

    Qui est une requête valide.

    Merci, je vais essayer de le faire sans jQuery, mais pourrait donner. Le problème avec ta solution, c'est quand j'ai mis resizeBar à la console, il me donne le code html de chaîne, pas de l'objet.
    Pourriez-vous coller la réponse de console.log(elem) dans votre directive?
    ajout de la console.journal de elem
    Voir mise à jour de réponse.
    querySelector est un élément de la méthode de sorte qu'il fonctionne non seulement sur le document developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

    OriginalL'auteur knrz