angularjs - value - get angular scope in chrome console




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

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 variáveis.


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.


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.


Digamos que você queira acessar o escopo do elemento como

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

Você poderia usar o seguinte no console:

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

Isso lhe dará o escopo nesse elemento.


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á.

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


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

Eu concordo que o melhor é o Batarang com seu $scope depois de selecionar um objeto (é 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.


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


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 objetos de heap) selecionados por meio das propriedades nomeadas $ 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 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.


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

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

Por exemplo, se sua diretiva de controlador é criada da seguinte forma: <div ng-controller="FormController as frm"> então para acessar uma propriedade startDate do seu controlador, você chamaria angular.element($0).scope().frm.startDate


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

angular.element().scope();

exemplo:

<div id=""></div>





angularjs-scope