Pertanyaan Bagaimana cara mengakses variabel lingkup $ di konsol browser menggunakan AngularJS?


Saya ingin mengakses saya $scope variabel di konsol JavaScript Chrome. Bagaimana aku melakukan itu?

Saya tidak bisa melihat $scope atau nama modul saya myapp di konsol sebagai variabel.


1123
2017-12-06 11:52


asal


Jawaban:


Pilih elemen di panel HTML alat pengembang dan ketik ini di konsol:

angular.element($0).scope()

Di WebKit dan Firefox, $0 adalah referensi ke node DOM yang dipilih di tab elemen, sehingga dengan melakukan ini Anda mendapatkan ruang lingkup node DOM yang dipilih dicetak di konsol.

Anda juga dapat menargetkan cakupan berdasarkan ID elemen, seperti:

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

Addons / Extensions

Ada beberapa ekstensi Chrome yang sangat berguna yang mungkin ingin Anda periksa:

  • Batarang. Ini sudah ada untuk sementara waktu.

  • ng-inspektur. Ini adalah yang terbaru, dan seperti namanya, ini memungkinkan Anda untuk memeriksa lingkup aplikasi Anda.

Bermain dengan jsFiddle

Ketika bekerja dengan jsfiddle Anda dapat membuka biola menunjukkan mode dengan menambahkan /show di akhir URL. Saat berlari seperti ini Anda memiliki akses ke angular global. Anda dapat mencobanya di sini:

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

jQuery Lite

Jika Anda memuat jQuery sebelum AngularJS, angular.element dapat melewati pemilih jQuery. Jadi Anda bisa memeriksa lingkup pengontrol dengan

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

Sebuah tombol

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

... dan seterusnya.

Anda mungkin benar-benar ingin menggunakan fungsi global untuk membuatnya lebih mudah:

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

Sekarang kamu bisa melakukan ini

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

Cek di sini: http://jsfiddle.net/jaimem/DvRaR/1/show/


1613
2017-12-06 12:56



Untuk memperbaiki jawaban 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();

Atau jika Anda menggunakan jQuery, ini melakukan hal yang sama ...

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

Cara lain yang mudah untuk mengakses elemen DOM dari konsol (seperti jm yang disebutkan) adalah dengan mengkliknya di tab 'elemen', dan secara otomatis disimpan sebagai $0.

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

173
2018-04-02 04:49



Jika Anda telah menginstal Batarang

Maka Anda bisa menulis:

$scope

ketika Anda memiliki elemen yang dipilih dalam tampilan elemen di chrome. Ref - https://github.com/angular/angularjs-batarang#console


70
2017-09-06 16:36



Ini adalah cara untuk mencapai ruang lingkup tanpa Batarang, yang dapat Anda lakukan:

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

Atau jika Anda ingin menemukan ruang lingkup Anda dengan nama pengontrol, lakukan ini:

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

Setelah Anda membuat perubahan pada model Anda, Anda harus menerapkan perubahan ke DOM dengan memanggil:

scope.$apply();

32
2018-06-04 17:02



Di suatu tempat di controller Anda (sering kali baris terakhir adalah tempat yang bagus), taruh

console.log($scope);

Jika Anda ingin melihat ruang lingkup batin / implisit, katakanlah di dalam ng-repeat, sesuatu seperti ini akan bekerja.

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

Kemudian di pengontrol Anda

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

Perhatikan bahwa di atas kita mendefinisikan fungsi showScope () dalam ruang lingkup orang tua, tapi tidak apa-apa ... ruang lingkup anak / batin / implisit dapat mengakses fungsi itu, yang kemudian mencetak ruang lingkup berdasarkan peristiwa, dan karenanya ruang lingkup yang terkait dengan elemen yang memecat acara.

Saran @ jm-juga berfungsi, tapi saya tidak berpikir itu bekerja di dalam jsFiddle. Saya mendapatkan kesalahan ini pada jsFiddle di dalam Chrome:

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


28
2017-12-06 21:16



Satu peringatan untuk banyak jawaban ini: jika Anda alias pengontrol objek lingkup Anda akan berada di objek dalam objek yang dikembalikan dari scope().

Misalnya, jika arahan pengontrol Anda dibuat seperti ini: <div ng-controller="FormController as frm"> lalu mengakses startDate milik pengontrol Anda, Anda akan memanggil angular.element($0).scope().frm.startDate


9
2018-02-24 04:00



Saya setuju yang terbaik adalah Batarang dengan itu $scope setelah memilih objek (itu sama dengan angular.element($0).scope() atau bahkan lebih pendek dengan jQuery: $($0).scope() (kesukaanku))

Juga, jika seperti saya, Anda memiliki Anda ruang lingkup utama di body elemen, a $('body').scope() bekerja dengan baik.


8
2018-01-23 23:54