web-dev-qa-db-fra.com

Dans AngularJS, comment trouvez-vous toutes les étendues sur une page?

Une fois que nous avons une portée en main, nous pouvons aller à la racine et explorer la hiérarchie des portées.

Mais existe-t-il un moyen direct de trouver toutes les étendues sur une page?

De même, étant donné un élément HTML, existe-t-il un moyen direct de trouver sa portée englobante?

scopeangularjs
31
wl.

vous pouvez voir toutes les étendues sur la page en utilisant ce sélecteur CSS

.ng-scope { border: 1px solid red; }

et toutes les reliures:

.ng-binding { border: 1px solid red; }

Vous pouvez ensuite les récupérer en convertissant l'élément DOM en sélecteur

var selector = angular.element(some_dom_element);

Puis utilisez le sélecteur pour revenir à la portée/contrôleur/injecteur

var scope = selector.scope();
var controller = selector.controller();
var injector = selector.injector();
80
Misko Hevery

Toutes les portées ne sont pas liées à des éléments. Si vous voulez all scopes sur la page, parcourez l’arborescence comme suit:

function getScopes(root) {
    var scopes = [];

    function visit(scope) {
        scopes.Push(scope);
    }
    function traverse(scope) {
        visit(scope);
        if (scope.$$nextSibling)
            traverse(scope.$$nextSibling);
        if (scope.$$childHead)
            traverse(scope.$$childHead);
    }

    traverse(root);
    return scopes;
}

getScopes($rootScope)
21
larspars

Je ne sais pas pourquoi cela vous serait utile, mais vous pouvez le faire:

scopeElements = document.getElementsByClassName('ng-scope');
scopes = [].map.call(scopeElements, function(e){ return angular.element(e).scope(); })

L'autre option consiste à parcourir l'arborescence de la portée en partant de la portée racine à l'aide de notre apis privé: $$ childHead et $$ nextSibling.

Il est plus probable que vous souhaitiez simplement voir où se situent les limites de la portée et que vous pouvez le faire avec ceci:

scopeElements = document.getElementsByClassName('ng-scope');
angular.element(scopeElements).css('border', '1px solid red');

Ensuite, vous pouvez simplement utiliser Web Inspector pour sélectionner un élément d’intérêt et en obtenir la portée en:

angular.element($0).scope();
16
Igor Minar

Je recommande AngularJS Batarang. C'est un outil de débogage qui vous permet de visualiser toutes les étendues de la page (entre autres). 

https://github.com/angular/angularjs-batarang

10
vonkohorn

Vous pouvez trouver une portée pour élément en utilisant:

$(element).scope()

ou

angular.element(element).scope()

Je ne pense pas qu'il soit possible d'obtenir facilement toutes les portées d'une page (autre que de descendre de la portée racine). 

7
psyho

Vous devriez développer votre application dans le navigateur Google Chrome (si vous ne l'utilisez pas déjà) et pouvoir utiliser l'extension Batarang géniale qui ajoute un nouveau panneau AngularJS dédié aux outils de développement. Vous pouvez y voir toutes les portées, quelles sont leurs relations et quelle valeur ont tous ses attributs.

http://blog.angularjs.org/2012/07/introducing-angularjs-batarang.html

5
xMort

Dans Angulars, il y a $rootScope, qui est la racine de chaque scope. Il a le champ child et toute la hiérarchie est à l'intérieur de $ rootScope .Si vous voulez trouver un scope avec un élément html, vous aurez probablement un problèmes, parce que cette portée peut être Isolated scope.Peut-être que vous avez une directive ici, laquelle portée est isolée.Si vous avez quelque chose comme ça, essayez d'utiliser el.isolatedScope()

0
Hazarapet Tunanyan

Dans Chrome, en utilisant des outils de développement. J'utilise la ligne de commande de la console. 

Choisissez un élément dans le panneau HTML des outils de développement et tapez-le dans la console:

angular.element($0).scope()

ou bien faites un clic droit sur un élément de page et sélectionnez: inspecter un élément.

$($0).scope() retournera la portée associée à l'élément. Vous pouvez voir ses propriétés tout de suite.

Pour afficher une portée parent d'éléments:

$($0).scope().$parent

Vous pouvez aussi enchaîner ceci:

$($0).scope().$parent.$parent

Vous pouvez regarder la portée racine:

$($0).scope().$root

Si vous avez mis en surbrillance une directive avec une portée isolée, vous pouvez la regarder avec:

$($0).isolateScope()

Si disponible, vous pouvez faire la même chose avec les étendues enfant et frère.

$($0).scope().$sibling

Je peux parcourir les étendues pour vérifier quelle portée possède quels contrôleurs, objets, etc. et lorsque vous travaillez avec des directives personnalisées, c'est essentiel. Dans une base de code volumineuse, ce n'est pas si facile de trouver des choses comme ça. 

Récemment, j'avais deux contrôleurs portant le même nom, à l'exception d'une lettre majuscule attachée à une vue. J'utilisais le mauvais contrôleur et cela a pris un certain temps avant que je réalise que c'était le problème de mes liaisons.

0
James Drinkard