Comment puis-je accéder à l' $portée variable dans le navigateur de la console en utilisant AngularJS?

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 du DOM à partir de la console (comme jm mentionné) est de cliquer sur dans la "éléments" de l'onglet, et obtient automatiquement stockés en tant que $0.

angular.element($0).scope();

C'est un moyen d'arriver à portée sans Batarang, vous pouvez le faire:

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

Ou si vous voulez trouver votre portée par le nom du contrôleur, ce faire:

var scope = angular.element('[ng-controller=myController]').scope();

Après vous apportez des modifications à votre modèle, vous aurez besoin pour appliquer les modifications aux DOM en appelant le:

scope.$apply();

Une mise en garde à plusieurs de ces réponses: si vous alias de votre contrôleur à votre portée les objets dans un objet à l'intérieur de l'objet renvoyé de scope().

Par exemple, si votre contrôleur de la directive est créé comme suit:
<div ng-controller="FormController as frm">
ensuite, pour accéder à un startDate propriété de votre contrôleur, vous appelez angular.element($0).scope().frm.startDate

D'ajouter et d'améliorer les autres réponses, dans la console, entrez $($0) pour récupérer l'élément. Si c'est une application Angularjs, jQuery version lite est chargé par défaut.

Si vous n'êtes pas à l'aide de jQuery, vous pouvez utiliser angulaire.élément($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 référence de l'API de $0. Les deux Firebug et Chrome ont cette référence.

Cependant, les outils de développement Chrome mettra à la disposition de la dernière des cinq éléments (ou de tas d'objets) sélectionné par les propriétés nommé $0, $1, $2, $3, $4 l'utilisation de ces références. Plus récemment, l'élément ou l'objet peut être référencé en tant que $0, la deuxième plus récente que 1 $et ainsi de suite.

Ici est la Ligne de commande référence de l'API pour Firebug que la liste des références.

$($0).scope() sera de retour à la portée associée à l'élément. Vous pouvez voir ses propriétés tout de suite.

Quelques autres choses que vous pouvez utiliser sont:

• Vue, un élément parent:

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

• Vous pouvez la chaîne: le

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

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

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

• Si vous avez mis en évidence une directive à l'isoler de la portée, vous pouvez le regarder avec:

$($0).isolateScope()

Voir Trucs et Astuces pour le Débogage Inconnu Code Angularjs pour plus de détails et d'exemples.

Suffit d'attribuer $scope comme une variable globale. Le problème est résolu.

app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
    window.$scope = $scope;
}

Nous avons en fait besoin $scope plus souvent dans le développement que dans la production.

Déjà mentionné par @JasonGoemaat mais l'ajouter comme une réponse appropriée à cette question.

J'ai l'habitude d'utiliser jQuery fonction data() pour qui:

$($0).data().$scope

L' $0 est l'élément actuellement sélectionné dans chrome inspecteur DOM.
$1, $2 ... et ainsi de suite, sont des éléments précédemment sélectionnés.

Mettre un point d'arrêt dans votre code à un endroit à proximité d'une référence à l' $portée variable (de sorte que la somme de champ est dans le "bon vieux JavaScript" champ d'application). Ensuite, vous pouvez inspecter l' $la valeur de la portée dans la console.

Au Chrome de la console :

 1. Select the **Elements** tab
 2. Select the element of your angular's scope. For instance, click on an element <ui-view>, or <div>, 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

Chrome console

Cela nécessite jQuery pour être installé en tant que bien, mais fonctionne parfaitement pour un environnement de dev. Il regarde à travers chaque élément pour obtenir le cas des champs puis les renvoie étiquetés avec les noms de contrôleur. C'est aussi la suppression de toute propriété de commencer avec un $ qui est ce que angularjs utilise généralement pour les sa configuration.

let controllers = (extensive = false) => {
            let result = {};
            $('*').each((i, e) => {
                let scope = angular.element(e).scope();
                if(Object.prototype.toString.call(scope) === '[object Object]' && e.hasAttribute('ng-controller')) {
                    let slimScope = {};
                    for(let key in scope) {
                        if(key.indexOf('$') !== 0 && key !== 'constructor' || extensive) {
                            slimScope[key] = scope[key];
                        }
                    }
                    result[$(e).attr('ng-controller')] = slimScope;
                }
            });

            return result;
        }