1233 votes

Comment accéder à la variable $scope angulaire dans le navigateur ' console s ?

<p>Je voudrais accéder à mon <code></code> variable dans la console JS de Chrome. Comment je fais que ? Je ne peux ni voir <code></code> , ni le nom de mon module <code></code> dans la console en tant que variables.</p>

1750voto

jaime Points 15538

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 à la sélection des nœuds du DOM dans l'onglet éléments, en faisant cela, vous obtenez sélectionnés nœud DOM portée imprimées dans la console

Addons/Extensions

Il y a quelques très utile Chrome Extensions que vous souhaitez commander:

  • Batarang. Cela a été autour pendant un certain temps.

  • ng-inspecteur. C'est le plus récent, et comme son nom l'indique, elle vous permet d'inspecter votre application étendues.

Jouer avec JS Fiddle

Lorsque vous travaillez avec des jsfiddle vous pouvez ouvrir le violon dans les show mode en ajoutant /show à la fin de l'url. Lors de l'exécution comme cela, vous avez accès à l' angular mondiale. Vous pouvez l'essayer ici

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

jQuery Lite

Si vous chargez jQuery avant angulaire, angular.element peut être passé un sélecteur jQuery. Vous pourriez donc à inspecter l'étendue d'un contrôleur

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

D'un bouton

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

... et ainsi de suite.

Vous pourriez réellement envie d'utiliser une fonction globale pour le rendre plus facile

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érifier ici: http://jsfiddle.net/jaimem/DvRaR/1/show/

186voto

Simon Points 4467
<p>Afin d’améliorer jm de répondre...<pre><code></code></pre><p>Ou si vous utilisez jQuery, cela fait la même chose...</p><pre><code></code></pre><p>Un autre moyen facile d’accéder à un élément DOM de la console (comme jm mentionné) est de cliquer sur elle dans l’onglet « éléments », et il obtient automatiquement stocké sous forme <code></code> .</p><pre><code></code></pre></p>

72voto

chrismarx Points 1381
<p>Si vous avez installé <a href="https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk">Batarang</a><p>Ensuite, vous pouvez simplement écrire :</p><pre><code></code></pre><p>Quand vous avez l’élément sélectionné dans l’affichage des éléments en chrome. Ref - <a href="https://github.com/angular/angularjs-batarang#console">https://github.com/angular/angularjs-batarang#console</a></p></p>

37voto

BraveNewMath Points 1306
<p>Il s’agit d’un moyen d’obtenir à portée sans batarang. En supposant que vous avez des références à jquery et anguleuses sur votre page, vous pouvez faire :<pre><code></code></pre><p>ou si vous voulez trouver votre portée par le nom du contrôleur, procédez comme suit :</p><pre><code></code></pre><p>Après avoir apporté des modifications à votre modèle, vous devez appliquer les modifications au modèle DOM en appelant</p><pre><code></code></pre></p>

31voto

Mark Rajcok Points 85912

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

console.log($scope);

Si vous voulez voir un intérieur/étendue implicite, dire à l'intérieur d'une ng-repeat, quelque chose de ce genre de travail.

<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());
    }
}

Remarque que ci-dessus, nous définissons les showScope() en fonction de la portée parent, mais c'est bien... l'enfant/intérieur/étendue implicite pouvez accéder à cette fonction, qui imprime ensuite le champ d'application basé sur l'événement, et donc la portée associée à l'élément qui a déclenché l'événement.

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

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X