Como acesso a variável $ scope no console do navegador usando o AngularJS?

Gostaria de acessar minha $scopevariável no console JavaScript do Chrome. Como faço isso?

Não consigo ver $scopenem o nome do meu módulo myappno console como variáveis.

Escolha um elemento no painel HTML das ferramentas do desenvolvedor e digite isso no console:

angular.element($0).scope()

No WebKit e Firefox, $0é uma referência ao nó DOM selecionado na guia elementos. Dessa forma, você obtém o escopo do nó DOM selecionado impresso no console.

Você também pode direcionar o escopo pelo ID do elemento, da seguinte maneira:

angular.element(document.getElementById('yourElementId')).scope()

Complementos / extensões

Existem algumas extensões úteis do Chrome que você pode querer conferir:

• Batarang . Isso já existe há algum tempo.

• Inspetor de ng . Este é o mais novo e, como o nome sugere, permite que você inspecione os escopos do seu aplicativo.

Tocando com jsFiddle

Ao trabalhar com o jsfiddle, você pode abrir o violino no modo de exibição adicionando /showno final da URL. Ao executar assim, você tem acesso ao angularglobal. Você pode tentar aqui:

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

jQuery Lite

Se você carregar o jQuery antes do AngularJS, angular.elementpoderá receber um seletor de jQuery. Então você pode inspecionar o escopo de um controlador com

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

De um botão

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

... e assim por diante.

Você pode realmente querer usar uma função global para facilitar:

window.SC = function(selector){
    return angular.element(selector).scope();
};

Agora você pode fazer isso

SC('button:eq(10)')
SC('button:eq(10)').row   // -> value of scope.row

Verifique aqui: http://jsfiddle.net/jaimem/DvRaR/1/show/

Para melhorar a resposta do 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 se você estiver usando jQuery, isso faz a mesma coisa ...

$('#elementId').scope();
$('#elementId').scope().$apply();

Outra maneira fácil de acessar um elemento DOM do console (como jm mencionado) é clicar nele na guia 'elementos', e ele é automaticamente armazenado como $0.

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

Se você instalou o Batarang

Então você pode escrever:

$scope

quando você tiver o elemento selecionado na visualização de elementos no chrome. Ref - https://github.com/angular/angularjs-batarang#console

Esta é uma maneira de chegar ao escopo sem o Batarang, você pode fazer:

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

Ou se você deseja encontrar seu escopo pelo nome do controlador, faça o seguinte:

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

Depois de fazer alterações no seu modelo, você precisará aplicar as alterações no DOM chamando:

scope.$apply();

Em algum lugar do seu controlador (geralmente a última linha é um bom lugar), coloque

console.log($scope);

Se você quiser ver um escopo interno / implícito, digamos, dentro de um ng-repeat, algo como isso funcionará.

<li ng-repeat="item in items">
   ...
   <a ng-click="showScope($event)">show scope</a>
</li>

Então no seu controlador

function MyCtrl($scope) {
    ...
    $scope.showScope = function(e) {
        console.log(angular.element(e.srcElement).scope());
    }
}

Observe que, acima, definimos a função showScope () no escopo pai, mas tudo bem ... o escopo filho / interno / implícito pode acessar essa função, que depois imprime o escopo com base no evento e, portanto, o escopo associado a o elemento que disparou o evento.

A sugestão de @ jm- também funciona, mas não acho que funcione dentro de um jsFiddle. Recebo este erro no jsFiddle dentro do Chrome:

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

Uma ressalva para muitas dessas respostas: se você alias seu controlador, seus objetos de escopo estarão em um objeto dentro do objeto retornado de scope().

Por exemplo, se sua diretiva de controlador for criada assim: <div ng-controller="FormController as frm"> para acessar uma startDatepropriedade do seu controlador, você chamariaangular.element($0).scope().frm.startDate

Eu concordo que o melhor é Batarang $scopedepois de selecionar um objeto (é o mesmo angular.element($0).scope()ou mais curto com o jQuery: $($0).scope()(meu favorito))

Além disso, se como eu, você tem o escopo principal do bodyelemento, $('body').scope()funciona bem.

Para adicionar e aprimorar as outras respostas, no console, digite $($0)para obter o elemento. Se for um aplicativo Angularjs, uma versão jQuery lite é carregada por padrão.

Se você não estiver usando jQuery, poderá usar angular.element ($ 0) como em:

angular.element($0).scope()

Para verificar se você possui jQuery e a versão, execute este comando no console:

$.fn.jquery

Se você inspecionou um elemento, o elemento atualmente selecionado estará disponível através da referência da API da linha de comandos $ 0. O Firebug e o Chrome têm essa referência.

No entanto, as ferramentas de desenvolvedor do Chrome disponibilizarão os últimos cinco elementos (ou objetos de heap) selecionados através das propriedades denominadas $ 0, $ 1, $ 2, $ 3, $ 4 usando essas referências. O elemento ou objeto selecionado mais recentemente pode ser referenciado como $ 0, o segundo mais recente como $ 1 e assim por diante.

Aqui está a referência da API da linha de comando do Firebug que lista suas referências.

$($0).scope()retornará o escopo associado ao elemento. Você pode ver suas propriedades imediatamente.

Algumas outras coisas que você pode usar são:

• Exibir um escopo pai de elementos:

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

• Você também pode encadear isso:

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

• Você pode olhar para o escopo raiz:

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

• Se você destacou uma diretiva com escopo isolado, pode ver com:

$($0).isolateScope()

Consulte Dicas e truques para depurar código Angularjs não familiar para obter mais detalhes e exemplos.

Inspecione o elemento e use-o no console

s = $($0).scope()
// `s` is the scope object if it exists

Apenas atribua $scopecomo uma variável global. Problema resolvido.

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

Na verdade, precisamos $scopemais frequentemente de desenvolvimento do que de produção.

Já mencionado por @JasonGoemaat, mas adicioná-lo como uma resposta adequada a esta pergunta.

Eu usei angular.element($(".ng-scope")).scope();no passado e funciona muito bem. Só é bom se você tiver apenas um escopo de aplicativo na página ou se puder fazer algo como:

angular.element($("div[ng-controller=controllerName]")).scope(); ou angular.element(document.getElementsByClassName("ng-scope")).scope();

Eu normalmente uso a função jQuery data () para isso:

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

O item $ 0 está atualmente selecionado no inspetor DOM do chrome. $ 1, $ 2 ... e assim por diante são itens selecionados anteriormente.

Digamos que você queira acessar o escopo do elemento como

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

Você pode usar o seguinte no console:

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

Isso fornecerá o escopo desse elemento.

No console do Chrome:

 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

Exemplo

angular.element($0).scope().a
angular.element($0).scope().b

Console do Chrome

Isso requer que o jQuery seja instalado também, mas funciona perfeitamente para um ambiente de desenvolvimento. Ele examina cada elemento para obter as instâncias dos escopos e depois as rotula com os nomes dos controladores. A remoção de qualquer propriedade também começa com um $, que é o que angularjs geralmente usa para sua configuração.

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

em angular, obtemos o elemento jquery por angular.element () .... permite c ...

angular.element().scope();

exemplo:

<div id=""></div>

Apenas para fins de depuração, coloquei isso no início do controlador.

   window.scope = $scope;

  $scope.today = new Date();

E é assim que eu uso.

exclua-o quando terminar a depuração.

Coloque um ponto de interrupção no seu código em um local próximo à referência à variável $ scope (para que o $ scope esteja no escopo atual do 'JavaScript antigo simples'). Em seguida, você pode inspecionar o valor de escopo $ no console.

Apenas defina uma variável JavaScript fora do escopo e atribua-a ao seu escopo no seu controlador:

var myScope;
...
app.controller('myController', function ($scope,log) {
     myScope = $scope;
     ...

É isso aí! Ele deve funcionar em todos os navegadores (testados pelo menos no Chrome e Mozilla).

Está funcionando e estou usando esse método.