web-dev-qa-db-fra.com

Obtenir pour obtenir toutes les étendues enfants dans Angularjs étant donné la portée parent

Je voudrais savoir comment obtenir une liste de toutes les étendues enfant étant donné une étendue parent. Tout ce que je peux trouver dans les propriétés de la portée est $$ childHead, $$ childTail, $$ nextSibling et $$ prevSibling.

L'approche que j'utilise maintenant consiste à obtenir le childHead du parent, puis à utiliser le nextSibling pour obtenir le prochain enfant jusqu'à ce que nextSibling soit nul.

Est-ce qu'il y a une meilleure approche? Étant donné que je veux appeler une méthode [getModel] sur tous les enfants, existe-t-il encore une meilleure façon de procéder?

angularjsangularjs-scopeparent-childenumeration
22
ritcoder

Les directives enfants utilisent des étendues isolées et ont à leurs propres valeurs qui ne sont pas visibles du parent. Je souhaite accéder à ces valeurs à partir de la portée parent.

La "méthode angulaire" pour résoudre le problème des "étendues parentales ayant besoin d'accéder aux étendues enfants" consiste à déplacer le modèle vers le haut dans le parent et à faire en sorte que les étendues enfant référencent les propriétés/données parent (plutôt que les étendues enfants ayant leurs propres propriétés/copies locales). Par exemple, c'est ainsi que nous traitons avec ng-repeat si chaque itération contient, disons, un élément de formulaire d'entrée (c'est-à-dire que chaque itération a besoin d'une liaison de données bidirectionnelle): Difficulté avec ng-model, ng-repeat et input)

Avec les directives, définissez d'abord un tableau d'objets dans la portée parent, puis faites accéder chaque portée enfant isolée à ce tableau de portée parent (ou objet individuel) en utilisant la notation '=' (c'est-à-dire la notation de liaison de données bidirectionnelle). Étant donné qu'un objet est partagé, les étendues isolées référenceront les objets parents (ils n'obtiendront pas de copie locale). Désormais, toutes les modifications que vous apportez aux propriétés des étendues enfants modifient en fait les propriétés de l'étendue parent.

16
Mark Rajcok

Tous Angular est attachée à l'élément DOM, vous pouvez commencer par inspecter l'enfant en utilisant l'élément actuel jusqu'à l'enfant que vous souhaitez atteindre. Une fois là-bas, utilisez la fonction ci-dessous pour obtenir la portée.

angular.element('#5th_element').scope();
25
wajatimur

Dans AngularJS 1.3.2, une méthode countChildScopes a été ajoutée au module ngMock:

/** 
 * @ngdoc méthode 
 * @name $ rootScope.Scope # $ countChildScopes 
 * @module ngMock 
 * @description 
 * Compte toutes les étendues enfants directes et indirectes de la portée actuelle. 
 * 
 * La portée actuelle est exclue du comptage. Le décompte inclut toutes les étendues enfant isolées. 
 * 
 * @Returns {nombre} Nombre total de portées enfant. 
 */
 Fonction countChildScopes (portée) 
 {
 // jshint validthis: true 
 nombre de var = 0; // exclure la portée actuelle 
 var root = scope || angular.element (document) .injector (). get ('$ rootScope'); 
 var pendingChildHeads = [root. $$ childHead]; 
 var currentScope; 
 
 while (pendingChildHeads.length) 
 {
 currentScope = pendingChildHeads.shift (); 
 
 while (currentScope) 
 {
 count + = 1; 
 pendingChildHeads.Push (currentScope. $$ childHead); 
 currentScope = currentScope. $$ nextSibling; 
} 
} 
} 
 
 nombre de retours; 
}

Utilisez un objet comme valeur de retour pour obtenir les ID:

 fonction enumerateChildScopes (scope) 
 {
 // jshint validthis: true 
 var enum = {}; // exclure la portée actuelle 
 var root = scope || angular.element (document) .injector (). get ('$ rootScope'); 
 var pendingChildHeads = [root. $$ childHead]; 
 var currentScope; 
 
 while (pendingChildHeads.length) 
 {
 currentScope = pendingChildHeads.shift (); 
 
 while (currentScope) 
 {
 enum ["scope" + pendingChildHeads.length] = currentScope. $ id; 
 pendingChildHeads.Push (currentScope. $$ childHead); 
 currentScope = currentScope. $$ nextSibling; 
} 
} 
 
 return enum; 
}

Références

5
Paul Sweatte