web-dev-qa-db-fra.com

CoffeeScript - Le référencement des nœuds DOM dans Angular sont interdites

Ma question principale est simple:

Je reçois des erreurs lors de la manipulation DOM dans les contrôleurs ou les directives, mais la fonctionnalité fonctionne parfaitement.

Error: [$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed! Expression: open()

Je voudrais ignorer ces erreurs et obtenir la confirmation qu'il est sûr de le faire, du point de vue de la fonctionnalité (pas du point de vue de la conception)

Pour garder les choses simples, j'apprécierais une réponse simple à cette question sans remettre en question mon besoin de le faire.

Maintenant, si quelqu'un veut discuter plus en détail, j'ai ce Gist: https://Gist.github.com/kosz/04f916a5725d85045be5 (dépendances: angulaire, jquery, jquery ui dialog) avec le code dans lequel je rencontre actuellement ce problème.

J'ai fait de mon mieux jusqu'à présent, pour me débarrasser de cette erreur, et sur la base de ce que j'ai lu et des documents, la manipulation de dom dans angular semble être encouragée dans les directives.

J'ai donc fait fonctionner le code avec une directive, cependant, il renvoie toujours l'erreur!?

Comme vous pouvez le voir, j'utilise l'interface utilisateur Jquery et je l'affiche pour chaque élément de la liste, si l'utilisateur souhaite le modifier. Je ne manipule pas directement le dom, cependant, j'ai besoin d'un moyen de contrôler les événements close/open de la boîte de dialogue jQuery ui, qui ne fait pas Angular remplir ma console d'erreurs.

Toute idée à ce sujet est grandement appréciée.

Veuillez noter que je connais le angular ui bootstrap modal, et ce n'est pas une option pour moi d'utiliser dans ce scénario particulier.

javascriptjqueryangularjsdomcoffeescript
39
Cosmin

Comme l'indique l'erreur, Angular interdit l'accès aux nœuds DOM dans les expressions.

CoffeeScript utilise un return implicite si aucun n'est spécifié.

Cela signifie que, par exemple, le scope.open la fonction dans votre code:

return element.dialog('open');

Angular le détectera et générera l'erreur.

Si vous ajoutez un return explicite, cela devrait résoudre le problème:

scope.open = =>
  element.dialog('open') 
  return true
95
tasseKATT

Bien que la réponse acceptée soit juste, j'aimerais quand même partager mon expérience car il s'est avéré que c'était un problème différent. En fait, j'ai eu le même problème, mais je ne retournais rien du tout de ma fonction (et n'utilisais pas CoffeeScript), j'ai donc été un peu perplexe et j'ai eu du mal à trouver une solution.

Dans mon cas, le problème semblait être que je passais le nœud DOM comme argument à la fonction comme ceci:

<span ng-mouseenter="doSomething($event.currentTarget)"></span>

Ce qui s'est avéré être une solution ici a été de changer le code mentionné pour ne transmettre que l'événement et pas le nœud directement:

<span ng-mouseenter="doSomething($event)"></span>

Ensuite, récupérez le nœud dans le contrôleur/directive/quoi que ce soit comme ceci:

doSomething = function(evt){
    var elem = evt.currentTarget;
    // do something with this element...
};
14
Nobita

Se produit lorsqu'une expression tente d'accéder à un nœud DOM.

AngularJS restreint l'accès aux nœuds DOM à partir d'expressions car c'est un moyen connu d'exécuter du code Javascript arbitraire.

Cette vérification n'est effectuée que sur les index d'objets et les appels de fonction dans Angular. Ce sont des endroits plus difficiles à protéger pour le développeur. L'accès aux membres en pointillés (comme abc) n'effectue pas cette vérification - c'est au développeur de ne pas exposer de tels objets sensibles et puissants directement sur la chaîne de portée.

Pour résoudre cette erreur, évitez d'accéder aux nœuds DOM.

Le $parse:isecdom une erreur se produit également lorsqu'un gestionnaire d'événements appelle une fonction qui renvoie un nœud DOM.

<button ng-click="iWillReturnDOM()">click me</button>

js:

$scope.iWillReturnDOM = function() {
  return someDomNode;
}

Pour résoudre ce problème, évitez de renvoyer des nœuds DOM à partir de gestionnaires d'événements.

Remarque: Cette erreur signifie souvent que vous accédez à DOM à partir de vos contrôleurs, ce qui est généralement un signe de mauvais style de codage qui viole la séparation des préoccupations.

Retours implicites dans CoffeeScript

Cette erreur peut se produire plus fréquemment lors de l'utilisation de CoffeeScript, qui possède une fonctionnalité appelée retours implicites. Cette fonctionnalité de langage renvoie le dernier objet déréférencé dans la fonction lorsque la fonction n'a pas d'instruction de retour explicite.

La solution dans ce scénario consiste à ajouter une instruction de retour explicite. Pour example return false à la fonction.

Erreur: $ parse: isecdom Référencement d'un noeud DOM dans Expression

3
shilovk