AngularJS kullanarak tarayıcı konsolundaki $ scope değişkenine nasıl erişirim?

$scopeDeğişkenime Chrome'un JavaScript konsolundan erişmek istiyorum . Bunu nasıl yaparım?

Modülümün $scopeadını myappkonsolda ne değişken olarak ne de görebiliyorum .

Geliştirici araçlarının HTML panelinde bir öğe seçin ve bunu konsola yazın:

angular.element($0).scope()

In WebKit ve Firefox, $0böylece bunu yaparak konsolda çıktısı seçilen DOM düğüm kapsamını olsun, elementler sekmesinde seçilen DOM düğüme referanstır.

Kapsamı şu şekilde öğe kimliğine göre de hedefleyebilirsiniz:

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

Eklentileri / Uzantıları

Kontrol etmek isteyebileceğiniz bazı yararlı Chrome uzantıları vardır:

• Batarang . Bu bir süredir var.

• ng-müfettiş . Bu en yenisidir ve adından da anlaşılacağı gibi, uygulamanızın kapsamlarını incelemenize izin verir.

JsFiddle ile oynamak

Jsfiddle ile çalışırken URL'nin sonuna ekleyerek kemanı gösteri modunda açabilirsiniz /show. Bu şekilde koşarken angularküresel olana erişebilirsiniz . Burada deneyebilirsiniz:

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

jQuery Lite

AngularJS'den önce jQuery yüklerseniz, angular.elementbir jQuery seçicisinden geçirilebilir. Böylece bir kontrol cihazının kapsamını

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

Bir düğmenin

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

... ve bunun gibi.

Aslında bunu kolaylaştırmak için küresel bir işlev kullanmak isteyebilirsiniz:

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

Şimdi bunu yapabilirsin

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

Buradan kontrol edin: http://jsfiddle.net/jaimem/DvRaR/1/show/

JM'nin cevabını geliştirmek için ...

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

Veya jQuery kullanıyorsanız, bu aynı şeyi yapar ...

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

Konsoldan bir DOM öğesine erişmenin başka bir kolay yolu (jm belirtildiği gibi) 'öğeler' sekmesinde tıklamaktır ve otomatik olarak olarak depolanır $0.

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

Batarang'ı yüklediyseniz

Sonra yazabilirsiniz:

$scope

öğeyi krom görünümünde öğeler seçtiğinizde. Ref - https://github.com/angular/angularjs-batarang#console

Bu, Batarang olmadan kapsama girmenin bir yoludur, şunları yapabilirsiniz:

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

Veya kapsamınızı denetleyici adına göre bulmak istiyorsanız, bunu yapın:

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

Modelinizde değişiklik yaptıktan sonra, değişiklikleri arayarak DOM'a uygulamanız gerekir:

scope.$apply();

Denetleyicinizde bir yerde (genellikle son satır iyi bir yerdir)

console.log($scope);

Bir iç / örtülü kapsam görmek istiyorsanız, bir ng-yinede söyleyin, böyle bir şey işe yarayacaktır.

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

Sonra kumandanızda

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

Yukarıda showScope () işlevini üst kapsamda tanımladığımızı, ancak sorun değil ... alt / iç / örtük kapsamın bu işleve erişebileceğini ve daha sonra olaya dayalı kapsamı ve dolayısıyla olayı başlatan öğe.

@ jm- 'nin önerisi de işe yarıyor, ama bir jsFiddle içinde çalıştığını düşünmüyorum. Chrome'da jsFiddle'da bu hatayı alıyorum:

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

Bu cevapların çoğuna bir uyarı: kontrolörünüzü taklit ederseniz, kapsam nesneleriniz döndürülen nesnenin içindeki bir nesnede olacaktır scope().

Örneğin, denetleyici yönergeniz şöyle oluşturulursa: denetleyicinizin <div ng-controller="FormController as frm"> bir startDateözelliğine erişmek için ,angular.element($0).scope().frm.startDate

En iyisi, $scopebir nesneyi seçtikten sonra Batarang ile katılıyorum ( angular.element($0).scope()jQuery ile aynı veya daha kısa: $($0).scope()(benim favorim))

Ayrıca, benim gibi bodyöğenin ana kapsamına sahipseniz , $('body').scope()iyi çalışır.

Diğer yanıtları eklemek ve geliştirmek için, konsolda $($0)öğeyi almak üzere girin . Bir Angularjs uygulamasıysa, varsayılan olarak bir jQuery lite sürümü yüklenir.

JQuery kullanmıyorsanız, aşağıdaki gibi angular.element (0 $) kullanabilirsiniz:

angular.element($0).scope()

JQuery ve sürümünün olup olmadığını kontrol etmek için konsolda şu komutu çalıştırın:

$.fn.jquery

Bir öğeyi incelediyseniz, seçili öğeye $ 0 komut satırı API başvurusu aracılığıyla erişilebilir. Hem Firebug hem de Chrome bu referansa sahiptir.

Bununla birlikte, Chrome geliştirici araçları, bu referansları kullanarak $ 0, $ 1, $ 2, $ 3, $ 4 adlı özelliklerle seçilen son beş öğeyi (veya yığın nesnelerini) kullanılabilir hale getirecektir. En son seçilen öğeye veya nesneye $ 0, ikincisine en son $ 1 vb. Başvurulabilir.

İşte Firebug için referanslarını listeleyen Komut Satırı API referansı.

$($0).scope()öğeyle ilişkili kapsamı döndürür. Özelliklerini hemen görebilirsiniz.

Kullanabileceğiniz diğer bazı şeyler şunlardır:

• Öğelerin üst kapsamını görüntüleme:

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

• Bunu da zincirleyebilirsiniz:

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

• Kök kapsamına bakabilirsiniz:

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

• İzole kapsamı olan bir yönerge vurguladıysanız, aşağıdakilere bakabilirsiniz:

$($0).isolateScope()

Daha fazla ayrıntı ve örnek için Bilmediğiniz Angularjs Kodunda Hata Ayıklama İpuçları ve Püf Noktaları konusuna bakın .

Elemanı inceleyin, ardından bunu konsolda kullanın

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

$scopeGlobal değişken olarak atamanız yeterlidir. Sorun çözüldü.

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

Aslında $scopegelişimde üretimden daha sık ihtiyacımız var .

@JasonGoemaat tarafından zaten bahsedildi, ancak bu soruya uygun bir cevap olarak eklendi.

angular.element($(".ng-scope")).scope();Geçmişte kullandım ve harika çalışıyor. Yalnızca sayfada yalnızca bir uygulama kapsamınız varsa veya şunun gibi bir şey yapabilirsiniz:

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

Genellikle bunun için jQuery data () işlevini kullanın:

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

$ 0 şu anda krom DOM denetçisinde seçilen öğedir. 1 $, 2 $ .. vb. Önceden seçilmiş öğelerdir.

Diyelim ki elemanın kapsamına erişmek istediğiniz

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

Konsolda aşağıdakileri kullanabilirsiniz:

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

Bu size o öğenin kapsamını verecektir.

Chrome konsolunda:

 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

Misal

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

Chrome konsolu

Bu, jQuery'nin de yüklenmesini gerektirir, ancak geliştirici ortamı için mükemmel çalışır. Kapsamların örneklerini almak için her öğeye bakar ve daha sonra bunları denetleyici adlarıyla etiketlenmiş olarak döndürür. Ayrıca herhangi bir özelliği kaldırmak, angularjs'in yapılandırması için genellikle kullandığı $ ile başlar.

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

açısal olarak biz angular.element () .... tarafından jquery öğesi olsun ...

angular.element().scope();

misal:

<div id=""></div>

Yalnızca hata ayıklama amacıyla, bunu denetleyicinin başına koydum.

   window.scope = $scope;

  $scope.today = new Date();

Ve ben böyle kullanıyorum.

sonra hata ayıklama bittiğinde silin.

Kodunuza $ scope değişkeni referansına yakın bir yere bir kesme noktası koyun (böylece $ kapsamı geçerli 'düz eski JavaScript' kapsamında olur). Ardından konsoldaki $ scope değerini inceleyebilirsiniz.

Kapsam dışında bir JavaScript değişkeni tanımlamanız ve denetleyicinizdeki kapsamınıza atamanız yeterlidir:

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

Bu kadar! Tüm tarayıcılarda çalışmalıdır (en azından Chrome ve Mozilla'da test edilmiştir).

Çalışıyor ve bu yöntemi kullanıyorum.