Comment accéder à la variable $ scope dans la console du navigateur en utilisant AngularJS?

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

 angular.element($0).scope() 

Dans WebKit et Firefox, $0 est une référence au nœud DOM sélectionné dans l’onglet elements. Ainsi, vous obtenez la scope du nœud DOM sélectionnée dans la console.

Vous pouvez également cibler la scope par ID d’élément, comme suit:

 angular.element(document.getElementById('yourElementId')).scope() 

Addons / Extensions

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

• Batarang . Cela a été autour depuis un moment.

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

Jouer avec jsFiddle

Lorsque vous travaillez avec jsfiddle, vous pouvez ouvrir le violon en mode show en ajoutant /show à la fin de l’URL. Lorsque vous courez comme ça, vous avez access à la angular globale. Vous pouvez l’essayer ici:

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

jQuery Lite

Si vous chargez jQuery avant AngularJS, angular.element peut être passé à un sélecteur jQuery. Donc, vous pouvez inspecter la scope d’un contrôleur avec

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

D’un bouton

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

… etc.

Vous pourriez en fait vouloir utiliser une fonction globale pour faciliter les choses:

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

Maintenant vous pouvez le faire

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

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

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, cela 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 mentionné par jm) consiste à cliquer dessus dans l’onglet “elements”, et il sera automatiquement stocké sous la forme $0 .

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

Si vous avez installé Batarang

Ensuite, vous pouvez simplement écrire:

 $scope 

lorsque l’élément est sélectionné dans la vue des éléments en chrome. Ref – https://github.com/angular/angularjs-batarang#console

C’est une manière d’obtenir une scope sans Batarang, vous pouvez le faire:

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

Ou si vous souhaitez trouver votre scope par nom de contrôleur, procédez comme suit:

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

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

 scope.$apply(); 

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

 console.log($scope); 

Si vous voulez voir une scope interne / implicite, disons à l’intérieur d’un ng-repeat, quelque chose comme ça fonctionnera.

 
 ... show scope  

Puis dans votre contrôleur

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

Notez que ci-dessus, nous définissons la fonction showScope () dans la scope parent, mais ce n’est pas grave … la scope enfant / interne / implicite peut accéder à cette fonction, qui imprime ensuite la scope en fonction de l’événement, et donc la scope 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 dans un jsFiddle. Je reçois cette erreur sur jsFiddle dans Chrome:

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

Une mise en garde à plusieurs de ces réponses: si vous alias votre contrôleur, vos objects de scope seront dans un object dans l’object renvoyé à partir de scope() .

Par exemple, si votre directive de contrôleur est créée comme

:

pour accéder à une propriété startDate de votre contrôleur, vous devez appeler angular.element($0).scope().frm.startDate

Je suis d’accord que le meilleur est Batarang avec sa $scope après avoir sélectionné un object (c’est la même chose angular.element($0).scope() ou même plus court avec jQuery: $($0).scope() (mon préféré))

De plus, si comme moi vous avez une scope principale sur l’élément body , un $('body').scope() fonctionne correctement.

Atsortingbuez simplement $scope tant que variable globale. Problème résolu.

 app.controller('myCtrl', ['$scope', '$http', function($scope, $http) { window.$scope = $scope; } 

En réalité, nous avons besoin $scope plus de $scope dans le développement que dans la production.

Mentionné déjà par @JasonGoemaat mais l’ajoutant comme une réponse appropriée à cette question.

J’utilise habituellement la fonction jQuery data () pour cela:

 $($0).data().$scope 

Le $ 0 est actuellement sélectionné dans l’inspecteur DOM de chrome. $ 1, $ 2 .. et ainsi de suite sont des éléments précédemment sélectionnés.

Inspectez l’élément, puis utilisez-le dans la console

 s = $($0).scope() // `s` is the scope object if it exists 

Pour append et améliorer les autres réponses, dans la console, entrez $($0) pour obtenir l’élément. S’il s’agit d’une application Angularjs, une version de jQuery lite est chargée par défaut.

Si vous n’utilisez pas jQuery, vous pouvez utiliser angular.element ($ 0) comme dans:

 angular.element($0).scope() 

Pour vérifier si vous avez jQuery et la version, lancez cette commande dans la console:

 $.fn.jquery 

Si vous avez inspecté un élément, l’élément actuellement sélectionné est disponible via la référence API de ligne de commande $ 0. Firebug et Chrome ont tous deux cette référence.

Cependant, les outils de développement Chrome mettront à disposition les cinq derniers éléments (ou objects de tas) sélectionnés via les propriétés nommées $ 0, $ 1, $ 2, $ 3, $ 4 en utilisant ces références. L’élément ou l’object le plus récemment sélectionné peut être référencé comme $ 0, le deuxième comme $ 1 et ainsi de suite.

Voici la référence de l’API de ligne de commande pour Firebug qui répertorie ses références.

$($0).scope() renverra la scope associée à l’élément. Vous pouvez voir ses propriétés immédiatement.

Certaines autres choses que vous pouvez utiliser sont:

• Afficher une scope parentale d’éléments:

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

• Vous pouvez aussi enchaîner ceci:

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

• Vous pouvez regarder la scope racine:

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

• Si vous avez mis en évidence une directive avec une scope isolée, vous pouvez la regarder avec:

$($0).isolateScope()

Voir Conseils et astuces pour le débogage du code Angularjs inconnu pour plus de détails et d’exemples.

J’ai utilisé angular.element($(".ng-scope")).scope(); dans le passé et cela fonctionne très bien. Seulement bon si vous n’avez qu’une seule étendue d’application sur la page, ou vous pouvez faire quelque chose comme:

angular.element($("div[ng-controller=controllerName]")).scope(); ou angular.element(document.getElementsByClassName("ng-scope")).scope();

Disons que vous voulez accéder à la scope de l’élément comme

Vous pouvez utiliser les éléments suivants dans la console:

 angular.element(document.querySelector('[ng-controller=hw]')).scope(); 

Cela vous donnera la scope de cet élément.

Placez un point d’arrêt dans votre code à un endroit proche d’une référence à la variable $ scope (de sorte que la scope $ se trouve dans la scope actuelle de “plain old JavaScript”). Ensuite, vous pouvez inspecter la valeur $ scope dans la console.

en angular on obtient l’élément jquery par angular.element () …. laisse c …

angular.element().scope();

Exemple:

Sur la console de Chrome:

  1. Select the **Elements** tab 2. Select the element of your angular's scope. For instance, click on an element , or 
, or etc. 3. Type the command **angular.element($0).scope()** with following variable in the angular's scope 

Exemple

 angular.element($0).scope().a angular.element($0).scope().b 

Console de chrome

Définissez simplement une variable JavaScript en dehors de la scope et assignez-la à votre scope dans votre contrôleur:

 var myScope; ... app.controller('myController', function ($scope,log) { myScope = $scope; ... 

C’est tout! Il devrait fonctionner dans tous les navigateurs (testé au moins dans Chrome et Mozilla).

Cela fonctionne et j’utilise cette méthode.