मैं AngularJS का उपयोग कर ब्राउज़र के कंसोल में $ स्कोप चर का उपयोग कैसे करूं?

डेवलपर टूल के HTML पैनल में एक तत्व चुनें और इसे कंसोल में टाइप करें:

angular.element($0).scope()

WebKit और फ़ायरफ़ॉक्स में, $0 तत्व टैब में चयनित डॉम नोड का संदर्भ है, इसलिए ऐसा करने से आपको कंसोल में चयनित डीओएम नोड स्कोप मिलता है।

आप तत्व आईडी द्वारा दायरे को भी लक्षित कर सकते हैं, जैसे:

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

ऐड-ऑन / एक्सटेंशन

कुछ बहुत ही उपयोगी क्रोम एक्सटेंशन हैं जिन्हें आप देखना चाहते हैं:

• Batarang यह थोड़ी देर के लिए आसपास रहा है।

• ng-inspector । यह सबसे नया है, और जैसा कि नाम से पता चलता है, यह आपको अपने आवेदन के दायरे का निरीक्षण करने की अनुमति देता है।

JsFiddle के साथ खेल रहा है

Jsfiddle के साथ काम करते समय आप यूआरएल के अंत में जोड़ /show दिखाकर शो मोड में पहेली खोल सकते हैं। इस तरह चलते समय आपके पास angular वैश्विक तक पहुंच होती है। आप इसे आजमा सकते हैं:

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

jQuery लाइट

यदि आप AngularJS से पहले jQuery लोड करते हैं, angular.element को jQuery चयनकर्ता पास किया जा सकता है। तो आप एक नियंत्रक के दायरे का निरीक्षण कर सकते हैं

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

एक बटन के

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

... और इसी तरह।

आप वास्तव में इसे आसान बनाने के लिए वैश्विक फ़ंक्शन का उपयोग करना चाह सकते हैं:

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

अब आप यह कर सकते हैं

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

यहां देखें: http://jsfiddle.net/jaimem/DvRaR/1/show/

अगर आपने Batarang स्थापित किया है

तो आप बस लिख सकते हैं:

$scope

जब आपके पास क्रोम में तत्वों के दृश्य में चयनित तत्व होता है। रेफरी - https://github.com/angular/angularjs-batarang#console

कहीं आपके नियंत्रक में (अक्सर अंतिम पंक्ति एक अच्छी जगह है), डाल दिया

console.log($scope);

यदि आप एक आंतरिक / निहित क्षेत्र देखना चाहते हैं, तो एनजी-दोहराना के अंदर कहें, ऐसा कुछ काम करेगा।

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

फिर अपने नियंत्रक में

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

ध्यान दें कि ऊपर हम शोस्कोप () फ़ंक्शन को मूल दायरे में परिभाषित करते हैं, लेकिन यह ठीक है ... बच्चा / आंतरिक / निहित क्षेत्र उस फ़ंक्शन तक पहुंच सकता है, जो तब ईवेंट के आधार पर दायरे को प्रिंट करता है, और इसलिए इसके साथ जुड़े दायरे वह तत्व जिसने घटना को निकाल दिया।

@ जेएम-सुझाव भी काम करता है, लेकिन मुझे नहीं लगता कि यह एक jsFiddle के अंदर काम करता है। मुझे यह त्रुटि क्रोम के अंदर jsFiddle पर मिलती है:

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

एक वैश्विक चर के रूप में बस $scope असाइन करें। समस्या सुलझ गयी।

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

हमें वास्तव में उत्पादन के मुकाबले विकास में $scope की आवश्यकता है।

@JasonGoemaat द्वारा पहले से उल्लेख किया गया है लेकिन इसे इस प्रश्न के उपयुक्त उत्तर के रूप में जोड़ रहा है।

बस दायरे के बाहर एक जावास्क्रिप्ट चर परिभाषित करें और इसे अपने नियंत्रक में अपने दायरे में असाइन करें:

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

बस! यह सभी ब्राउज़रों में काम करना चाहिए (कम से कम क्रोम और मोज़िला में परीक्षण किया गया)।

यह काम कर रहा है, और मैं इस विधि का उपयोग कर रहा हूँ।

इनमें से कई उत्तरों के लिए एक चेतावनी: यदि आप अपने नियंत्रक को उपनाम करते हैं तो आपकी गुंजाइश वस्तुएं वस्तु से scope() वस्तु के भीतर किसी ऑब्जेक्ट में होंगी।

उदाहरण के लिए, यदि आपका नियंत्रक निर्देश इस प्रकार बनाया गया है: <div ng-controller="FormController as frm"> फिर अपने नियंत्रक की angular.element($0).scope().frm.startDate गुण तक पहुंचने के लिए, आप angular.element($0).scope().frm.startDate को कॉल करेंगे angular.element($0).scope().frm.startDate

मैंने angular.element($(".ng-scope")).scope(); अतीत में और यह बहुत अच्छा काम करता है। केवल तभी अच्छा अगर आपके पास पृष्ठ पर केवल एक ऐप स्कोप है, या आप ऐसा कुछ कर सकते हैं:

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

$ कोड स्कोप वेरिएबल के संदर्भ के करीब कहीं भी अपने कोड में ब्रेकपॉइंट रखें (ताकि $ स्कोप वर्तमान 'सादे पुरानी जावास्क्रिप्ट' स्कोप में हो)। फिर आप कंसोल में $ स्कोप मान का निरीक्षण कर सकते हैं।

जेएम के जवाब पर सुधार करने के लिए ...

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

या यदि आप jQuery का उपयोग कर रहे हैं, तो यह वही काम करता है ...

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

कंसोल से डीओएम तत्व तक पहुंचने का एक और आसान तरीका (जैसा कि जेएम उल्लिखित है) 'तत्व' टैब में उस पर क्लिक करना है, और यह स्वचालित रूप से $0 रूप में संग्रहीत हो जाता है।

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

मैं ऑब्जेक्ट चुनने के बाद angular.element($0).scope() का सबसे अच्छा मानता हूं (यह angular.element($0).scope() या jQuery के साथ भी छोटा है: $($0).scope() (मेरा पसंदीदा))

इसके अलावा, अगर मेरे जैसे आप body तत्व पर एक मुख्य दायरा है, एक $('body').scope() ठीक काम करता है।

कोणीय में हम angular.element () द्वारा jquery तत्व मिलता है .... सी चलो ...

angular.element().scope();

उदाहरण:

<div id=""></div>

मैं आमतौर पर इसके लिए jQuery डेटा () फ़ंक्शन का उपयोग करता हूं:

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

$ 0 वर्तमान में क्रोम डोम इंस्पेक्टर में आइटम चुना गया है। $ 1, $ 2 .. और इसी तरह पहले से चुने गए आइटम हैं।

तत्व का निरीक्षण करें, फिर कंसोल में इसका उपयोग करें

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