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

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

Je ne peux pas voir $scope ni le nom de mon module myapp dans la console en tant que variables.

    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 entrer la description de l'image ici

    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.