la méthode addEventListener à la directive simple exemple dans AngularJS

Essayer d'obtenir cette très directive de base de l'exemple du travail. À partir de quelques investigations, 'elem' semble être un objet de HTMLHeadingElement (qui hérite de l'Élément). Je ne sais pas pourquoi elem.la méthode addEventListener ne fonctionnerait pas. Aussi, elem.lier semble fonctionner mais ce n'est pas le mondial de lier, droit?

Aussi, ce serait génial si quelqu'un pouvait toucher Modèle d'Objet de Document (DOM) Niveau 2 Spécification HTML vs Modèle d'Objet de Document (DOM) Niveau 1 cahier des charges. Arrivé de tomber sur ce pour la première fois, est-ce une nouvelle hiérarchie d'Objets pour les éléments du DOM?

Ci-dessous est le lien de la directive:-

link: function(scope, elem, attrs) {
  //elem will be HTMLHeadingElement object!
  scope.name = 'New Micheal!';
  elem.addEventListener('click', function(e) {
      elem.css('background-color', 'red');
    })
    /*elem.bind('mouseover', function(e) {
      elem.css('background-color', 'red');
    });
    elem.bind('mouseout', function(e) {
      elem.css('background-color', 'white');
    });*/
}

InformationsquelleAutor nev.m | 2016-06-23

angularjs javascript

2

elem est un jquery (ou jqlite) enveloppé élément. Ce n'est pas une instance de HTMLHeadingElement (bien que le sous-jacent enveloppé instance peut être consulté).

Pour ajouter le gestionnaire de clic, vous devriez être en utilisant: elem.click(function(e) { ... }); au lieu de addEventListener.

MODIFIER

L'approche ci-dessus ne fonctionne que si vous utilisez jquery bon (ne jqlite). Cependant, en général, vous ne devriez pas être en ajoutant des gestionnaires par le biais de JS. L'angle moyen est de le faire dans le modèle.

Quelque chose comme ceci:
```
scope.colorHandler = function() {
  elem.css('background-color', 'red');
});
```
Et dans le modèle:
```
template: '<div ng-click="name = \'colorHandler()\'"><h3>Hello {{name}}!!</h3></div>',
```
Dans cet exemple, en cliquant sur les div fera appel à la couleur de gestionnaire.

Ce n'est pas encore canonique angulaire, car tu dois être la manipulation css changements par le biais de changements dans les classes css et ng-class, mais cela devient de plus près et j'espère que ça illustre bien le propos.
- Ne pense pas qu'il y est un raccourci click() à moins d'utiliser jQuery...si c'est jQlite utiliser bind('click'
- Êtes-vous à l'aide de jqlite? En général, cependant, vous devez faire les choses à l'angle de côté et en ajoutant les gestionnaires dans les modèles. Je vais mettre à jour ma réponse.
- Juste par curiosité, quand je fais un alert(elem) , je vois [[objet HTMLDivElement]] qui m'a fait croire à sa une HTMLDivElement. Pourquoi ne pas alerte(elem) me donner un indice sur le fait que son jqlite objet?
- L'allusion est à la [[ ]] jquery/jqlite objet enveloppé est enveloppé dans un tableau (avec des méthodes supplémentaires sur le prototype). Donc, ce que vous voyez est ce que vous avez un tableau de longueur 1, où l'élément est un HTMLDivElement.
- ahh, ok. l'a obtenu. Merci.
InformationsquelleAutor Andrew Eisenberg
5

elem n'est pas un élément du DOM, c'est un jQlite objet (angulaire.un élément ou un objet jQuery si jQuery inclus dans la page d'avant angular.js

Le nœud DOM est elem[0]

Pouvez utiliser le angulaire.élément de l'API qui est un sous-ensemble de méthodes jQuery.

Pour écouteur de clics serait:
```
elem.bind('click',handlerfunc);
```
Ce n'est pas le mondial de bind()

Non...c'est une partie de l'API ci-dessus et les matches de jQuery bind()

bind() (obsolète, utilisez on()) - Ne prend pas en charge les espaces de noms, de sélecteurs, ou eventData

InformationsquelleAutor charlietfl

Vous avez 2 jQlite et options javascript:

javascript:

elem[0].addEventListener('click', function(e) {
   elem.css('background-color', 'red');
});

jQlite:

elem.bind('click', function(e) {
    elem.css('background-color', 'red');
});

InformationsquelleAutor MeTe-30

Vous devez vous connecter pour publier un commentaire.