IMHO, a experiência mais frustrante vem de obter / definir um valor de um escopo específico relacionado a um elemento visual. Fiz muitos pontos de interrupção não apenas em meu próprio código, mas também no próprio angular.js, mas às vezes simplesmente não é a maneira mais eficaz. Embora os métodos abaixo sejam muito poderosos, eles são definitivamente considerados uma prática ruim se você realmente os usa em código de produção, então use-os com sabedoria!
Obtenha uma referência no console a partir de um elemento visual
Em muitos navegadores não-IE, você pode selecionar um elemento clicando com o botão direito em um elemento e clicando em "Inspecionar Elemento". Alternativamente, você também pode clicar em qualquer elemento na guia Elementos no Chrome, por exemplo. O último elemento selecionado será armazenado na variável $0no console.
Obtenha um escopo vinculado a um elemento
Dependendo se existe uma diretiva que cria um escopo isolado, você pode recuperar o escopo por angular.element($0).scope()ou angular.element($0).isolateScope()(use $($0).scope()se $ estiver habilitado). Isso é exatamente o que você obtém ao usar a versão mais recente do Batarang. Se você estiver alterando o valor diretamente, lembre-se de usar scope.$digest()para refletir as alterações na IU.
$ eval é mau
Não necessariamente para depuração. scope.$eval(expression)é muito útil quando você deseja verificar rapidamente se uma expressão tem o valor esperado.
Os membros do protótipo ausentes do escopo
A diferença entre scope.blae scope.$eval('bla')é o primeiro não considera os valores herdados prototipicamente. Use o snippet abaixo para obter a imagem completa (você não pode alterar diretamente o valor, mas pode usar de $evalqualquer maneira!)
scopeCopy = function (scope) {
var a = {};
for (x in scope){
if (scope.hasOwnProperty(x) &&
x.substring(0,1) !== '$' &&
x !== 'this') {
a[x] = angular.copy(scope[x])
}
}
return a
};
scopeEval = function (scope) {
if (scope.$parent === null) {
return hoho(scope)
} else {
return angular.extend({}, haha(scope.$parent), hoho(scope))
}
};
Use-o com scopeEval($($0).scope()).
Onde está meu controlador?
Às vezes, você pode querer monitorar os valores ngModelao escrever uma diretiva. Use $($0).controller('ngModel')e você vai começar a verificar o $formatters, $parsers, $modelValue, $viewValue $rendere tudo mais.