web-dev-qa-db-fra.com

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

Je souhaite accéder à ma variable $scope dans la console JavaScript de Chrome. Comment je fais ça?

Je ne peux ni voir $scope, ni le nom de mon module myapp dans la console sous forme de variables.

angularjsangularjs-scope
1208
murtaza52

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 Éléments. Ainsi, l'étendue du nœud DOM sélectionné est imprimée dans la console.

Vous pouvez également cibler la portée par l'ID d'élément, comme suit:

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

Addons/Extensions

Il y a des extensions très utiles Chrome que vous pouvez vérifier:

  • Batarang . Cela fait longtemps.

  • ng-inspector . Il s’agit du plus récent et, comme son nom l’indique, il vous permet d’inspecter les domaines 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. En fonctionnant ainsi, vous avez accès à la angular global. Vous pouvez l'essayer ici:

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

jQuery Lite

Si vous chargez jQuery avant AngularJS, il est possible de passer un sélecteur jQuery à angular.element. Donc, vous pouvez inspecter le périmètre d'un contrôleur avec

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

D'un bouton

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

... etc.

Vous voudrez peut-être utiliser une fonction globale pour simplifier les choses:

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

Maintenant tu peux faire ça

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

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

1714
jaime

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 indiqué par jm) consiste à cliquer dessus dans l'onglet "Eléments". Il est automatiquement enregistré sous le nom $0.

angular.element($0).scope();
181
Simon East

Si vous avez installé Batarang

Ensuite, vous pouvez simplement écrire:

$scope

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

72
chrismarx

C’est une façon de s’en sortir sans Batarang, vous pouvez faire:

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

Ou si vous voulez trouver votre étendue 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 les modifications au DOM en appelant:

scope.$apply();
36
BraveNewMath

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, disons à l'intérieur d'une répétition ng, quelque chose comme ceci fonctionnera.

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

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 portée parent, mais ce n'est pas grave ... la portée enfant/intérieure/implicite peut accéder à cette fonction, qui affiche ensuite la portée en fonction de l'événement, et donc la portée 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. Je reçois cette erreur sur jsFiddle dans Chrome:

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

Une mise en garde à bon nombre de ces réponses: si vous alias votre contrôleur, vos objets de portée seront dans un objet dans l'objet renvoyé par scope().

Par exemple, si votre directive de contrôleur est créée comme suit: <div ng-controller="FormController as frm">, puis pour accéder à une propriété startDate de votre contrôleur, vous devez appeler angular.element($0).scope().frm.startDate.

10
Michael Blackburn

Je conviens que le meilleur est Batarang avec son $scope après la sélection d'un objet (identique à angular.element($0).scope() ou même plus court avec jQuery: $($0).scope() (mon préféré))

De plus, si comme moi vous avez la portée principale sur l’élément body, une $('body').scope() fonctionne bien.

8
Dorian

Pour ajouter 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 suit:

angular.element($0).scope()

Pour vérifier si vous avez jQuery et sa version, exécutez 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 d'API de ligne de commande $ 0. Firebug et Chrome ont tous deux cette référence.

Cependant, les outils de développement Chrome rendent disponibles les cinq derniers éléments (ou objets de tas) sélectionnés via les propriétés $ 0, $ 1, 2, 3, 4 et 4 en utilisant ces références. Le dernier élément ou objet sélectionné peut être référencé sous la forme $ 0, le deuxième en dernier sous la forme $ 1, etc.

Voici le référence d'API de ligne de commande pour Firebug qui répertorie ses références.

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

Quelques autres choses que vous pouvez utiliser sont:

  • 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()

Voir Conseils et astuces pour déboguer un code Angularjs inconn pour plus de détails et d’exemples.

5
James Drinkard

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

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

J'ai utilisé angular.element($(".ng-scope")).scope(); dans le passé et cela fonctionne très bien. Bon uniquement si vous avez un seul domaine d'application sur la page, ou si vous pouvez faire quelque chose comme:

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

4
Mike

Il suffit d'assigner $scope en tant que variable globale. Problème résolu.

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

Nous avons besoin de $scope plus souvent en développement qu'en production.

Déjà mentionné par @JasonGoemaat mais en l'ajoutant comme réponse appropriée à cette question.

4
Sandeep

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

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

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

3
wojtekc

Disons que vous voulez accéder à la portée de l'élément comme

<div ng-controller="hw"></div>

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

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

Cela vous donnera la portée de cet élément.

2
Praym

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 <ui-view>, or <div>, 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 enter image description here

0
Khachornchit Songsaen

Cela nécessite que jQuery soit également installé, mais fonctionne parfaitement pour un environnement de développement. Il examine chaque élément pour obtenir les instances des portées, puis les retourne étiquetées avec leurs noms de contrôleur. Cela supprime également toute propriété commençant par un $ qui est ce que angularjs utilise généralement pour sa configuration.

let controllers = (extensive = false) => {
            let result = {};
            $('*').each((i, e) => {
                let scope = angular.element(e).scope();
                if(Object.prototype.toString.call(scope) === '[object Object]' && e.hasAttribute('ng-controller')) {
                    let slimScope = {};
                    for(let key in scope) {
                        if(key.indexOf('$') !== 0 && key !== 'constructor' || extensive) {
                            slimScope[key] = scope[key];
                        }
                    }
                    result[$(e).attr('ng-controller')] = slimScope;
                }
            });

            return result;
        }
0
Luke Pring

dans angular on obtient jquery element par angular.element () .... permet à c ...

angular.element().scope();

exemple:

<div id=""></div>

0
Rizo

À des fins de débogage uniquement, je mets ceci au début du contrôleur.

   window.scope = $scope;

  $scope.today = new Date();

Et c'est comme ça que je l'utilise.

enter image description here

puis supprimez-le lorsque j'ai terminé le débogage.

0
mcvkr

Placez un point d'arrêt dans votre code à un emplacement proche de la référence à la variable $ scope (de sorte que $ scope se trouve dans la portée actuelle du "vieux code JavaScript ancien"). Ensuite, vous pouvez inspecter la valeur $ scope dans la console.

0
Chris Halcrow