Je voudrais accéder à mon $scope variable 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.
Je voudrais accéder à mon $scope variable 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.
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 des éléments, ce qui fait que la portée du nœud DOM sélectionnée est imprimée dans la console.
Vous pouvez également cibler la portée par ID d'élément, comme ceci:
angular.element(document.getElementById('yourElementId')).scope()
Addons / Extensions
Vous trouverez peut-être quelques extensions Google Chrome très utiles:
Batarang. Cela a été autour pendant un certain temps.
ng-inspecteur. C'est le plus récent, et comme son nom l'indique, il vous permet d'inspecter les portées de votre application.
Jouer avec jsFiddle
Lorsque vous travaillez avec jsfiddle, vous pouvez ouvrir le violon montrer mode en ajoutant /show à la fin de l'URL. Lorsque vous courez comme ça, 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, angular.element peut être passé un sélecteur jQuery. Vous pouvez donc inspecter la portée d'un contrôleur avec
angular.element('[ng-controller=ctrl]').scope()
D'un bouton
angular.element('button:eq(1)').scope()
... etc.
Vous pourriez réellement vouloir 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/
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 depuis la console (comme jm mentionné) est de cliquer dessus dans l'onglet 'éléments', et il est automatiquement stocké comme $0.
angular.element($0).scope();
Si vous avez installé Batarang
Ensuite, vous pouvez écrire:
$scope
lorsque vous avez sélectionné l'élément dans la vue des éléments en chrome. Ref - https://github.com/angular/angularjs-batarang#console
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();
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 fonctionner.
<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
Une mise en garde à plusieurs de ces réponses: si vous alias votre contrôleur vos objets de portée seront dans un objet dans l'objet retourné de scope().
Par exemple, si votre directive de contrôleur est créée comme suit:
<div ng-controller="FormController as frm">
puis accéder à un startDate propriété de votre contrôleur, vous appelleriez angular.element($0).scope().frm.startDate
Je suis d'accord le meilleur est Batarang avec c'est $scope après avoir sélectionné un objet (c'est pareil que angular.element($0).scope() ou encore plus court avec jQuery: $($0).scope() (mon préféré))
Aussi, si comme moi vous avez votre portée principale sur le body élément, un $('body').scope() fonctionne bien.
Affectez juste $scope en tant que variable globale. Problème résolu.
app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
window.$scope = $scope;
}
Nous avons vraiment besoin $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.