debugger - chrome extension angularjs batarang




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

Affectez simplement $scope 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.

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

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 en tant que variables.


C'est un moyen d'atteindre la portée sans Batarang, vous pouvez faire:

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

Ou si vous voulez trouver votre portée par nom de 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 modifications au DOM en appelant:

scope.$apply();

Définissez simplement une variable JavaScript en dehors de la portée et affectez-la à votre oscilloscope 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.


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

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

Vous pouvez utiliser ce qui suit dans la console:

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

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


J'ai utilisé angular.element($(".ng-scope")).scope(); dans le passé et ça fonctionne très bien. Seulement bon si vous avez une seule portée 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();


J'utilise habituellement la fonction jQuery data () 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.


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


Pour ajouter et améliorer les autres réponses, entrez $($0) dans la console pour obtenir l'élément. S'il s'agit d'une application Angularjs, une version allégée de jQuery 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, 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 ligne de commande API référence $ 0. Les deux Firebug et Chrome ont cette référence.

Toutefois, les outils de développement Chrome mettront à disposition les cinq derniers éléments (ou objets 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'objet sélectionné le plus récemment peut être référencé comme $ 0, le deuxième plus récent 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() retournera la portée associée à l'élément. Vous pouvez voir ses propriétés tout de suite.

D'autres choses que vous pouvez utiliser sont:

  • Afficher la portée parent d'un élément:

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

  • Vous pouvez enchaîner ceci aussi:

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

  • Vous pouvez regarder la portée de la racine:

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

  • Si vous avez mis en évidence une directive avec isolate scope, vous pouvez l'examiner avec:

$($0).isolateScope()

Voir Trucs et astuces pour le débogage Code Angularjs inconnue pour plus de détails et d'exemples.


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, dites à l'intérieur d'une ng-repeat, quelque chose comme ça va marcher.

<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 nous définissons ci-dessus la fonction showScope () dans la portée parent, mais ça va ... la portée enfant / interne / implicite peut accéder à cette fonction, qui imprime alors la portée en fonction de l'événement, et donc de 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 dans un jsFiddle. Je reçois cette erreur sur jsFiddle dans Chrome:

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



en angulaire on obtient l'élément jquery par angular.element () .... laisse c ...

angular.element().scope();

Exemple:

<div id=""></div>





angularjs-scope