Comment accéder à la variable angulaire $scope dans la console du navigateur ?

Question

Je voudrais accéder à mon $scope dans la console JS de Chrome. Comment faire ? Je ne peux ni voir $scope ni le nom de mon module myapp dans la console en tant que variables.

Answer 1

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

angular.element($0).scope() 

Dans webkit $0 est une référence au noeud DOM sélectionné dans l'onglet elements, donc en faisant ceci vous obtenez la portée du noeud DOM sélectionné imprimée dans la console.

Addons/Extensions

Il existe quelques extensions Chrome très utiles que vous pourriez vouloir vérifier :

• Batarang . Cela existe depuis un certain temps.

• ng-inspector . C'est le plus récent, et comme son nom l'indique, il vous permet d'inspecter les scopes de votre application.

Jouer avec le violon JS

Lorsque vous travaillez avec jsfiddle vous pouvez ouvrir le fiddle dans montrer en ajoutant /show à la fin de l'url. En fonctionnant de cette manière, vous avez accès à la angular mondial. Vous pouvez l'essayer ici

http://jsfiddle.net/jaimem/Yatbt/show

jQuery Lite

Si vous chargez jQuery avant angular, angular.element peut recevoir un sélecteur jQuery. Ainsi, vous pouvez inspecter la portée d'un contrôleur avec

angular.element('[ng-controller=ctrl]').scope()

D'un bouton

 angular.element('button:eq(1)').scope()

... et ainsi de suite.

Vous pouvez en fait utiliser une fonction globale pour vous faciliter la tâche.

window.SC = function(selector){
    return angular.element(selector).scope();
};

Maintenant, vous pourriez faire ceci

SC('button:eq(10)')
SC('button:eq(10)').row   // -> value of scope.row

Vérifiez ici : http://jsfiddle.net/jaimem/DvRaR/1/show/

Answer 2

Pour améliorer la réponse de JM...

// Access whole scope
angular.element(myDomElement).scope();

// Access and change variable in scope
angular.element(myDomElement).scope().myVar = 5;
angular.element(myDomElement).scope().myArray.push(newItem);

// Update page to reflect changed variables
angular.element(myDomElement).scope().$apply();

Ou si vous utilisez jQuery, ceci fait la même chose...

$('#elementId').scope();
$('#elementId').scope().$apply();

Un autre moyen facile d'accéder à un élément DOM à partir de la console (comme jm l'a mentionné) est de cliquer sur cet élément dans l'onglet "elements", et il est automatiquement stocké en tant que $0 .

angular.element($0).scope();

Answer 3

Si vous avez installé Batarang

Ensuite, tu peux juste écrire :

$scope

lorsque l'élément est sélectionné dans la vue des éléments de chrome. Réf. https://github.com/angular/angularjs-batarang#console

Answer 4

C'est un moyen d'atteindre le scope sans batarang. En supposant que vous avez des références à jquery et angular sur votre page, vous pouvez le faire :

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

ou si vous voulez trouver votre portée par le nom du contrôleur, faites ceci :

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

Après avoir apporté des modifications à votre modèle, vous devrez appliquer les changements au DOM en appelant

scope.$apply();

Answer 5

Quelque part dans votre contrôleur (souvent la dernière ligne est un bon endroit), mettez

console.log($scope);

Si vous voulez voir une portée interne/implicite, par exemple à l'intérieur d'un ng-repeat, quelque chose comme ceci fonctionnera.

<li ng-repeat="item in items">
   ...
   <a ng-click="showScope($event)">show scope</a>
</li>

Ensuite, dans votre contrôleur

function MyCtrl($scope) {
    ...
    $scope.showScope = function(e) {
        console.log(angular.element(e.srcElement).scope());
    }
}

Notez que nous définissons ci-dessus la fonction showScope() dans l'étendue parent, mais ce n'est pas grave... l'étendue enfant/intérieur/implicite peut accéder à cette fonction, qui affiche alors l'étendue basée sur l'événement, et donc l'étendue associée à l'élément qui a déclenché l'événement.

La suggestion de @jm- fonctionne également, mais je ne pense pas que cela fonctionne à l'intérieur d'un jsFiddle. J'obtiens cette erreur sur jsFiddle dans Chrome :

~~> angular.element($0).scope() ReferenceError: angular is not defined~~