IMHO, pengalaman yang paling membuat frustasi datang dari mendapatkan / menetapkan nilai lingkup tertentu yang terkait dengan elemen visual. Saya melakukan banyak breakpoint tidak hanya di kode saya sendiri, tetapi juga di angular.js itu sendiri, tetapi terkadang itu bukan cara yang paling efektif. Meskipun metode di bawah ini sangat ampuh, metode tersebut pasti dianggap sebagai praktik yang buruk jika Anda benar-benar menggunakannya dalam kode produksi, jadi gunakan dengan bijak!
Dapatkan referensi di konsol dari elemen visual
Di banyak browser non-IE, Anda dapat memilih elemen dengan mengklik kanan salah satu elemen dan mengklik "Periksa Elemen". Sebagai alternatif, Anda juga dapat mengklik elemen apa pun di tab Elemen di Chrome, misalnya. Elemen terbaru yang dipilih akan disimpan dalam variabel $0di konsol.
Dapatkan cakupan yang ditautkan ke elemen
Bergantung pada apakah ada direktif yang membuat cakupan isolasi, Anda bisa mengambil cakupan dengan angular.element($0).scope()atau angular.element($0).isolateScope()(gunakan $($0).scope()jika $ diaktifkan). Ini persis seperti yang Anda dapatkan ketika Anda menggunakan Batarang versi terbaru. Jika Anda mengubah nilainya secara langsung, ingatlah untuk menggunakan scope.$digest()untuk mencerminkan perubahan pada UI.
$ eval jahat
Belum tentu untuk debugging. scope.$eval(expression)sangat berguna saat Anda ingin memeriksa dengan cepat apakah ekspresi memiliki nilai yang diharapkan.
Anggota prototipe ruang lingkup yang hilang
Perbedaan antara scope.bladan scope.$eval('bla')adalah yang pertama tidak mempertimbangkan nilai yang diwariskan secara prototipe. Gunakan potongan di bawah ini untuk mendapatkan gambaran keseluruhan (Anda tidak dapat langsung mengubah nilainya, tetapi Anda dapat menggunakan$eval tetap !)
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))
}
};
Gunakan dengan scopeEval($($0).scope()).
Di mana pengontrol saya?
Terkadang Anda mungkin ingin memantau nilai-nilai ngModelsaat Anda menulis arahan. Gunakan $($0).controller('ngModel')dan Anda akan mendapatkan untuk memeriksa $formatters, $parsers, $modelValue, $viewValue $renderdan segala sesuatu.