javascript - openclassroom - angularjs tutorial




La liaison bidirectionnelle ne fonctionne pas dans la directive avec une portée transcluded (2)

Erreur de syntaxe signifie que vous avez mal écrit quelque chose. Ce n'est pas lié à un cadre / bibliothèque particulier. Vous avez probablement oublié d'ajouter "," ou de fermer une parenthèse. Vérifiez à nouveau

J'ai une zone de texte dans un contrôleur qui est lié au name modèle. Il y a une directive à l'intérieur du contrôleur et une autre zone de texte à l'intérieur de la directive qui est liée au même name modèle:

<div class="border" ng-controller="editCtrl">
   Controller: editCtrl <br/>
   <input type="text" ng-model="name" />
   <br/>
   <tabs>
      Directive: tabs <br/>
      <input type="text" ng-model="name"/>
   </tabs>
</div>

mod.directive('tabs', function() {
  return {
    restrict: 'E',
    transclude: true, 
    template:
      '<div class="border" ng-transclude></div>',
  };
});

Lorsque vous tapez quelque chose dans la zone de texte externe, elle est reflétée dans la zone de texte interne, mais si vous tapez quelque chose dans la zone de texte interne, elle cesse de fonctionner, autrement dit, les deux zones de texte ne reflètent plus la même valeur.

Voir l'exemple sur: http://jsfiddle.net/uzairfarooq/MNBLd/

J'ai également essayé d'utiliser la méthode d'attration bidirectionnelle ( scope: {name: '='} ) mais elle donne une erreur de syntaxe. Et en utilisant scope: {name: '@'} a le même effet.

Toute aide serait grandement appréciée.

En plus de la réponse acceptée, cet article m'a vraiment aidé à comprendre l'héritage prototypique dans les scpoes enfants. Je recommande fortement à tous ceux qui ont des problèmes avec les portées de le lire à fond.


Je crois que le problème a trait à la portée. Initialement, la zone de texte interne n'a pas de name défini, elle est donc héritée de la portée externe. C'est pourquoi la saisie dans la boîte extérieure est reflétée dans la boîte intérieure. Cependant, une fois que vous avez tapé dans la case interne, la portée interne contient désormais un name qui signifie qu'elle n'est plus liée au name externe, de sorte que la zone de texte externe ne se synchronise pas.

La solution appropriée consiste à stocker uniquement des modèles dans la portée, et non vos valeurs. Je l'ai corrigé dans http://jsfiddle.net/pdgreen/5RVza/ L'astuce consiste à créer un objet modèle ( data ) et à y référencer des valeurs.

Le code incorrect modifie la portée dans la directive, le code correct modifie le modèle dans la portée de la directive. Cette différence subtile permet à l'héritage de portée de fonctionner correctement.

Je crois que, comme l'a dit Miško Hevery, la portée devrait être en écriture seulement dans le contrôleur et en lecture seule dans les directives.

mise à jour: référence: https://www.youtube.com/watch?v=ZhfUv0spHCY#t=29m19s





angularjs