Bagaimana cara mengakses variabel $ scope di konsol browser menggunakan AngularJS?

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

Saya tidak bisa melihat $scopemaupun nama modul saya myappdi konsol sebagai variabel.

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

angular.element($0).scope()

Di WebKit dan Firefox, $0adalah referensi ke simpul DOM yang dipilih di tab elemen, jadi dengan melakukan ini Anda mendapatkan cakupan simpul DOM yang dipilih dicetak di konsol.

Anda juga dapat menargetkan ruang lingkup berdasarkan ID elemen, seperti:

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

Addons / Ekstensi

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 cakupan aplikasi Anda.

Bermain dengan jsFiddle

Saat bekerja dengan jsfiddle, Anda dapat membuka biola dalam mode pertunjukan dengan menambahkan /showdi akhir URL. Saat berjalan seperti ini, Anda memiliki akses ke angularglobal. Anda dapat mencobanya di sini:

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

jQuery Lite

Jika Anda memuat jQuery sebelum AngularJS, angular.elementdapat dikirimkan pemilih jQuery. Jadi Anda bisa memeriksa ruang lingkup pengontrol dengan

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

Dari sebuah tombol

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

... dan seterusnya.

Anda mungkin sebenarnya 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

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

Untuk meningkatkan 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 mudah lain untuk mengakses elemen DOM dari konsol (seperti yang disebutkan jm) adalah mengkliknya di tab 'elemen', dan secara otomatis akan disimpan sebagai $0.

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

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

Ini adalah cara mendapatkan ruang lingkup tanpa Batarang, Anda dapat melakukan:

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 pada DOM dengan menelepon:

scope.$apply();

Di suatu tempat di controller Anda (seringkali baris terakhir adalah tempat yang baik), taruh

console.log($scope);

Jika Anda ingin melihat lingkup internal / implisit, katakan di dalam ng-repeat, sesuatu seperti ini akan berhasil.

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

Kemudian di controller Anda

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

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

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

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

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

Misalnya, jika direktif pengontrol Anda dibuat seperti itu: <div ng-controller="FormController as frm"> maka untuk mengakses startDateproperti pengontrol Anda, Anda akan meneleponangular.element($0).scope().frm.startDate

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

Juga, jika seperti saya Anda memiliki Anda ruang lingkup utama pada bodyelemen, $('body').scope()berfungsi dengan baik.

Untuk menambah dan meningkatkan jawaban lain, di konsol, masukkan $($0)untuk mendapatkan elemen. Jika aplikasi Angularjs, versi jQuery lite dimuat secara default.

Jika Anda tidak menggunakan jQuery, Anda dapat menggunakan angular.element ($ 0) seperti pada:

angular.element($0).scope()

Untuk memeriksa apakah Anda memiliki jQuery dan versinya, jalankan perintah ini di konsol:

$.fn.jquery

Jika Anda telah memeriksa suatu elemen, elemen yang saat ini dipilih tersedia melalui referensi API baris perintah $ 0. Firebug dan Chrome memiliki referensi ini.

Namun, alat pengembang Chrome akan menyediakan lima elemen terakhir (atau tumpukan objek) yang dipilih melalui properti bernama $ 0, $ 1, $ 2, $ 3, $ 4 menggunakan referensi ini. Elemen atau objek yang paling baru dipilih dapat dirujuk sebagai $ 0, yang terbaru kedua sebagai $ 1 dan seterusnya.

Berikut ini adalah referensi API Baris Perintah untuk Firebug yang mencantumkan referensi itu.

$($0).scope()akan mengembalikan lingkup yang terkait dengan elemen. Anda dapat melihat propertinya segera.

Beberapa hal lain yang dapat Anda gunakan adalah:

• Lihat cakupan elemen induk:

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

• Anda dapat rantai ini juga:

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

• Anda dapat melihat lingkup root:

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

• Jika Anda menyoroti arahan dengan ruang lingkup yang terisolasi, Anda dapat melihatnya dengan:

$($0).isolateScope()

Lihat Kiat dan Trik untuk Mendebug Kode Angular yang Tidak Diketahui untuk detail dan contoh lebih lanjut.

Periksa elemen, lalu gunakan ini di konsol

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

Cukup tetapkan $scopesebagai variabel global. Masalah terpecahkan.

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

Kita sebenarnya membutuhkan $scopelebih sering dalam pengembangan daripada dalam produksi.

Disebutkan oleh @JasonGoemaat tetapi menambahkannya sebagai jawaban yang cocok untuk pertanyaan ini.

Saya telah menggunakan angular.element($(".ng-scope")).scope();di masa lalu dan itu bekerja dengan baik. Hanya bagus jika Anda hanya memiliki satu cakupan aplikasi pada halaman, atau Anda dapat melakukan sesuatu seperti:

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

Saya biasanya menggunakan fungsi data jQuery () untuk itu:

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

$ 0 saat ini dipilih di inspektur DOM chrome. $ 1, $ 2 .. dan seterusnya adalah item yang dipilih sebelumnya.

Katakanlah Anda ingin mengakses ruang lingkup elemen seperti

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

Anda dapat menggunakan yang berikut ini di konsol:

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

Ini akan memberi Anda ruang lingkup pada elemen itu.

Di konsol Chrome:

 1. Select the **Elements** tab
 2. Select the element of your angular's scope. For instance, click on an element <ui-view>, or <div>, or etc.
 3. Type the command **angular.element($0).scope()** with following variable in the angular's scope

Contoh

angular.element($0).scope().a
angular.element($0).scope().b

Konsol Chrome

Ini membutuhkan jQuery untuk diinstal juga, tetapi berfungsi dengan baik untuk lingkungan dev. Itu terlihat melalui setiap elemen untuk mendapatkan instance dari lingkup kemudian mengembalikannya diberi label dengan nama pengontrol di sana. Ini juga menghapus properti yang dimulai dengan $ yang biasanya digunakan angularjs untuk konfigurasinya.

let controllers = (extensive = false) => {
            let result = {};
            $('*').each((i, e) => {
                let scope = angular.element(e).scope();
                if(Object.prototype.toString.call(scope) === '[object Object]' && e.hasAttribute('ng-controller')) {
                    let slimScope = {};
                    for(let key in scope) {
                        if(key.indexOf('$') !== 0 && key !== 'constructor' || extensive) {
                            slimScope[key] = scope[key];
                        }
                    }
                    result[$(e).attr('ng-controller')] = slimScope;
                }
            });

            return result;
        }

di sudut kita mendapatkan elemen jquery oleh angular.element () .... ayo ...

angular.element().scope();

contoh:

<div id=""></div>

Untuk tujuan debugging saja, saya menempatkan ini di awal controller.

   window.scope = $scope;

  $scope.today = new Date();

Dan ini adalah bagaimana saya menggunakannya.

kemudian hapus ketika saya selesai debugging.

Letakkan breakpoint dalam kode Anda di suatu tempat yang dekat dengan referensi ke variabel $ scope (sehingga $ scope berada dalam lingkup 'plain old JavaScript' saat ini). Kemudian Anda dapat memeriksa nilai $ scope di konsol.

Cukup tentukan variabel JavaScript di luar cakupan dan tetapkan ke lingkup Anda di controller Anda:

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

Itu dia! Ini harus bekerja di semua browser (setidaknya diuji di Chrome dan Mozilla).

Ini berfungsi, dan saya menggunakan metode ini.