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


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.


1123
2017-12-06 11:52


origine


Réponses:


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/


1613
2017-12-06 12:56



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

173
2018-04-02 04:49



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


70
2017-09-06 16:36



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

32
2018-06-04 17:02



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


28
2017-12-06 21:16



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


9
2018-02-24 04:00



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.


8
2018-01-23 23:54



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.


4
2017-11-01 16:26