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

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

Eu não posso ver $scope nem o nome do meu módulo myapp no console como variables.

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

 angular.element($0).scope() 

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

Você também pode segmentar o escopo por ID de elemento, assim:

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

Complementos / Extensões

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

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

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

Brincando com jsfiddle

Ao trabalhar com jsfiddle, você pode abrir o violino no modo show adicionando /show no final do URL. Quando rodando assim você tem access ao global angular . Você pode tentar aqui:

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

jQuery Lite

Se você carregar o jQuery antes do AngularJS, o angular.element poderá ser passado por um seletor do 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 function global para facilitar:

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

Agora você poderia fazer isso

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

Confira 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 o jQuery, isso faz a mesma coisa …

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

Outra maneira fácil de acessar um elemento DOM a partir do console (como jm mencionado) é clicar nele na aba ‘elements’, e ele é automaticamente armazenado como $0 .

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

Se você instalou o Batarang

Então você pode simplesmente 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 Batarang, você pode fazer:

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

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

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

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

 scope.$apply(); 

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

 console.log($scope); 

Se você quiser ver um escopo interno / implícito, por exemplo, dentro de uma repetição ng, algo assim funcionará.

 
  • ... show scope
  • Então no seu controlador

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

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

    A sugestão do @ jm- também funciona, mas não acho que funcione dentro de um jsFiddle. Eu 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ê aliasse seu controlador, seus objects de escopo estariam em um object dentro do object retornado do scope() .

    Por exemplo, se sua diretiva de controlador é criada da seguinte forma:

    então para acessar uma propriedade startDate do seu controlador, você chamaria angular.element($0).scope().frm.startDate

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

    Além disso, se você tem o escopo principal no elemento body , um $('body').scope() funciona bem.

    Apenas atribua $scope como uma variável global. Problema resolvido.

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

    Na verdade, precisamos do $scope mais frequência no desenvolvimento do que na produção.

    Mencionado já pelo @JasonGoemaat mas adicionando-o como uma resposta adequada a esta questão.

    Eu costumo usar a function jQuery data () para isso:

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

    O $ 0 é atualmente o item selecionado no inspetor DOM do Google Chrome. $ 1, $ 2 .. e assim por diante são itens previamente selecionados.

    Inspecione o elemento e use-o no console

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

    Para adicionar e aprimorar as outras respostas, no console, insira $($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 o jQuery, você pode usar angular.element ($ 0) como em:

     angular.element($0).scope() 

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

     $.fn.jquery 

    Se você inspecionou um elemento, o elemento atualmente selecionado está disponível por meio da referência da API de linha de comando $ 0. Tanto o Firebug quanto o Chrome têm essa referência.

    No entanto, as ferramentas do desenvolvedor do Chrome disponibilizarão os últimos cinco elementos (ou objects de heap) selecionados por meio das propriedades nomeadas $ 0, $ 1, $ 2, $ 3, $ 4 usando essas referências. O elemento ou object 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 Command Line para o 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:

    • Veja um escopo pai de elementos:

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

    • Você pode encadear isso também:

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

    • Você pode olhar para o escopo da raiz:

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

    • Se você destacou uma diretiva com o escopo isolate, você pode examiná-la com:

    $($0).isolateScope()

    Veja Dicas e Truques para Depurar o Código Angularjs Unfamiliar para mais detalhes e exemplos.

    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 puder fazer algo como:

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

    Digamos que você queira acessar o escopo do elemento como

     

    Você poderia usar o seguinte no console:

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

    Isso lhe dará o escopo nesse elemento.

    Coloque um ponto de interrupção em seu código em algum lugar próximo a uma referência à variável $ scope (de modo que o $ escopo esteja no escopo ‘plain old JavaScript’ atual). Em seguida, você pode inspecionar o valor $ scope no console.

    em angular temos o elemento jquery por angular.element () …. vamos c …

    angular.element().scope();

    exemplo:

    No console do Chrome:

      1. Select the **Elements** tab 2. Select the element of your angular's scope. For instance, click on an element , or 
    , 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 insira a descrição da imagem aqui

    Basta definir uma variável JavaScript fora do escopo e atribuí-la ao seu escopo no seu controlador:

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

    É isso aí! Deve funcionar em todos os navegadores (testado pelo menos no Chrome e Mozilla).

    Está funcionando e estou usando esse método.