web-dev-qa-db-fra.com

Comment accéder à la variable $ scope dans angular à partir de chrome console

Comment accéder aux widgets de variable scope depuis la console de chrome

function MyCntrl($scope) {
    $scope.widgets = [
        {text:'Widget #1', datarow:1, datacol:1, datasizex:3, datasizey:3},
        {text:'Widget #2', datarow:2, datacol:1, datasizex:3, datasizey:3},
        {text:'Widget #3', datarow:1, datacol:2, datasizex:3, datasizey:3},
        {text:'Widget #4', datarow:2, datacol:2, datasizex:3, datasizey:3}
    ];

Quelque chose comme $scope.widgets _ ne fonctionne tout simplement pas dans la console!

angularjsgoogle-chrome-devtools
43
zotherstupidguy

La portée est liée au DOM, vous devez donc saisir un élément et utiliser du code angular) pour obtenir la portée.

Votre meilleur pari est d’obtenir un élément auquel le contrôleur est lié et de jeter un coup d’œil à sa portée.

Voici la réponse Comment puis-je accéder à la variable $ scope dans la console du navigateur avec AngularJS?

31
Will

c'est une façon de se rendre au champ sans batarang. En supposant que vous ayez des références à jquery et angular sur votre page, vous pouvez faire:

var scope = angular.element($('#selectorId')).scope();

ou si vous voulez trouver votre portée par nom de contrôleur, procédez comme suit:

var scope = angular.element($('[ng-controller=myController]')).scope();

Après avoir modifié votre modèle, vous devez appliquer ces modifications au DOM en appelant

scope.$apply();
26
BraveNewMath

Vous pouvez suivre l’aspect de Will ou installer Angular Batarang Chrome. Cela vous permettra non seulement de visualiser et de manipuler l’objet '$ scope' à partir de, disons votre console JavaScript, mais c'est également un outil fondamental lors du développement d'applications complexes AngularJS.

17
odiseo

Voici un exemple: J'ai le DOM suivant sur mon application angular Single Page:

<div ng-controller="usersAppController as uac" class="ng-scope">
    <div class="tab ng-scope is-normal is-active" id="rolesTab" ref="tabs" mode="normal" target-ref="rolesContent" xng-locals="xng.userApp.roles">Roles
    </div>
</div>

et this div est présent dans le nom du contrôleur usersAppController en tant qu'uac. Ci-dessus, j'ai un contrôleur en tant que syntaxe.

Notez également que j’utilise jQuery dans mon application:

La méthode $ ($ 0) .controller () me donnera un accès direct à l'objet uac qui se trouve sur l'objet $ scope.

$ ($ 0) .scope () me donnera un prototype de chaîne pour l'élément que j'ai sélectionné et si je suis cette chaîne, je trouverai mon objet scope sur cet élément.

1
bvmCoder