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

Question

मैं $scopeक्रोम के जावास्क्रिप्ट कंसोल में अपने वेरिएबल को एक्सेस करना चाहूंगा । मैं उसको कैसे करू?

मैं न तो देख सकता हूं $scopeऔर न ही अपने मॉड्यूल का नामmyapp कंसोल में चर के रूप में।

Comments

डिबगिंग के लिए मैं आमतौर पर window.MY_SCOPE = $scope;अपने नियंत्रक फ़ंक्शन में पहली चीज़ सेट करता हूं।

— जेसन गोएमाट

यदि आप फ़ायरफ़ॉक्स में विकास / परीक्षण पर विचार कर रहे हैं, तो आप अंगस्कोप का भी उपयोग कर सकते हैं , एक छोटा सा विस्तार जो $scopeचयनित डोम तत्वों की वस्तुओं को फायरबग के डोम इंस्पेक्टर में प्रदर्शित करता है ।

— कोस प्रोव

@JasonGoemaat क्यों नहीं खिड़की का उपयोग करें। $ गुंजाइश = $ गुंजाइश; ताकि आप केवल MY_SCOPE के बजाय $ गुंजाइश का उपयोग कर सकें - मैंने किसी भी समस्या पर ध्यान नहीं दिया है, लेकिन शायद मुझे सुरक्षा चिंता या कुछ याद नहीं है।

— जेम्स जेंट्स

स्पष्टता के लिए, कोणीय के लिए कोई नया व्यक्ति भ्रमित हो सकता है और सोच सकता है कि कंसोल में $ गुंजाइश जादुई रूप से उपलब्ध थी यदि बस इसे इस तरह से इस्तेमाल किया जा रहा है। इसके अलावा, यदि आप गलती से निर्देश की घोषणा में गुंजाइश का उपयोग करते हैं और उदाहरण के लिए कोड में $ गुंजाइश है, तो आप एक त्रुटि प्राप्त करने के बजाय विंडो ऑब्जेक्ट पर इसका उपयोग करेंगे।

— जेसन गोएमाट

Answer 1

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

angular.element($0).scope()

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

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

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

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

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

• बतरंग । यह कुछ समय के लिए आसपास रहा है।

• एनजी-इंस्पेक्टर । यह सबसे नया है, और जैसा कि नाम से पता चलता है, यह आपको अपने एप्लिकेशन के स्कोप का निरीक्षण करने की अनुमति देता है।

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

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

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

jQuery लाइट

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

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/

Comments

धन्यवाद। जब मैं बातरंग को स्थापित करने की कोशिश करता हूं तो यह बताता है कि आपका कंप्यूटर समर्थित नहीं है, मेरे पास ubuntu है, कोई विचार है?

— murtaza52

@ jm- जैसा कि angular.element($0).scope(), यह तब तक काम करता है जब तक आप कुछ तरीकों को कॉल करने की कोशिश नहीं करते हैं। मैंने कोशिश की, और किसी कारण से इस सेटअप में कोई HTTP अनुरोध संभव नहीं है?

— ktek

ध्यान दें कि यदि आप डिबग जानकारी को अक्षम कर रहे हैं तो आप हमेशा इस पद्धति का उपयोग करके अपरिभाषित हो जाएंगे। यह इरादा है और इसे रोका जा सकता है ..। $ compileProvider पर डिबग जानकारी को अक्षम नहीं करने पर

— रोबा

angular.element ($ 0) .scope (): आप $ $ ($ 0) .scope ()

— user2954463

@jaime को उल्लेख करना चाहिए कि प्रदर्शन के लिए बंद किए जाने पर किसी तत्व से गुंजाइश को फिर से कैसे सक्षम किया जाए।

— enorl76

Answer 2

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

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

कंसोल से एक DOM एलिमेंट को एक्सेस करने का एक और आसान तरीका (जैसा कि jm बताया गया है) 'एलिमेंट्स' टैब में उस पर क्लिक करना है, और यह अपने आप स्टोर हो जाता है $0।

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

Comments

कोणीय में जक्वरी का एक उपसमूह होता है, इसलिए आप हमेशा बाद के सिंटैक्स का उपयोग कर सकते हैं (यदि यह सही है), तो मुझे यकीन नहीं है कि

— पिज़ायोला गोर्गोनज़ोला

मैं के साथ समाप्त हुआ angular.element(document.body).scope(), धन्यवाद!

— एलेक्स सोरोकोलेटोव 3

Answer 3

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

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

$scope

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

Answer 4

यह बतरंग के बिना गुंजाइश पाने का एक तरीका है, आप यह कर सकते हैं:

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

या यदि आप नियंत्रक नाम से अपना दायरा खोजना चाहते हैं, तो यह करें:

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

अपने मॉडल में बदलाव करने के बाद, आपको कॉल करके DOM में परिवर्तन लागू करना होगा:

scope.$apply();

Comments

इस उत्तर का इतने उत्थान कैसे होता है? इसके लिए आपको jQuery की आवश्यकता नहीं है! angular.elementपहले से ही एक तत्व चयन विधि है। यह कहना बंद करो कि आपको अपनी आईडी द्वारा एक तत्व का चयन

— कीयोटिक

मैंने कहा कि आपको इसकी आवश्यकता नहीं है। मैं जो कह रहा हूं अगर आपके पास पहले से ही ऐसा है तो आप इसे इस तरह से इस्तेमाल कर सकते हैं।

— BraveNewMath

angular.element पहले से ही वह चीज है जिसके लिए आप jQuery का उपयोग कर रहे हैं। वास्तव में, यदि jQuery उपलब्ध angular.elementहै , तो jQuery के लिए एक उपनाम है। आप अनावश्यक रूप से अपने कोड को जटिल बना रहे हैं। angular.element('#selectorId')और angular.element('[ng-controller=myController]')कम कोड वाले ही काम करें। आप कॉल कर सकते हैंangular.element('#selectorId'.toString())

— Kyeotic

@ टायर्सियस, शायद आपकी प्रतिक्रिया कम दोषपूर्ण और गुस्सा और थोड़ा अधिक पेशेवर हो सकती है?

— टास

@ टास यू आर राइट, मैं बेवजह असभ्य था। मैं क्षमाप्रार्थी हूं। यह कहना पर्याप्त है कि एक ही काम दो बार किया जा रहा है।

— काइओटिक

Answer 5

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

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

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

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

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

Answer 6

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

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

Comments

नियंत्रक है की एक संपत्ति के रूप में (कंसोल के लिए इसलिए) देखने के लिए सुलभ $scope, नामित $ctrlडिफ़ॉल्ट रूप से, चाहे आप इसे प्रयोग का नाम बदलने की स्वतंत्र रूप से controllerAsया नहीं। मुझे समझ नहीं आ रहा है कि आपने मौजूदा उत्तरों में "चेतावनी" कहाँ देखी है। ध्यान दें कि जब controllerAsआम प्रचलन नहीं था, तो अधिकांश उत्तर यहां दिए गए थे ।

— ताओ

सही। जब उन उत्तरों को दिया controllerAsगया था, तो सामान्य अभ्यास नहीं था, इसलिए यह उन newbies के लिए भ्रमित था जो "कुकबुक" का पालन कर रहे थे, जो उन्हें नियंत्रक को उर्फ ​​करने के लिए कह रहा था, लेकिन तब उपनाम का उपयोग किए बिना गुणों को नहीं देख रहा था। दो साल पहले चीजें तेजी से आगे बढ़ रही थीं।

— माइकल ब्लैकबर्न

Answer 7

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

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

Answer 8

कंसोल में, अन्य उत्तरों को जोड़ने और बढ़ाने के $($0)लिए, तत्व प्राप्त करने के लिए दर्ज करें। यदि यह एक एंगुलरज एप्लिकेशन है, तो एक jQuery लाइट संस्करण डिफ़ॉल्ट रूप से लोड होता है।

यदि आप jQuery का उपयोग नहीं कर रहे हैं, तो आप angular.element ($ 0) का उपयोग इस प्रकार कर सकते हैं:

angular.element($0).scope()

यह जाँचने के लिए कि क्या आपके पास jQuery और संस्करण है, इस कमांड को कंसोल में चलाएँ:

$.fn.jquery

यदि आपने किसी तत्व का निरीक्षण किया है, तो वर्तमान में चयनित तत्व कमांड लाइन एपीआई संदर्भ $ 0 के माध्यम से उपलब्ध है। फायरबग और क्रोम दोनों का यह संदर्भ है।

हालाँकि, Chrome डेवलपर टूल इन संदर्भों का उपयोग करके $ 0, $ 1, $ 2, $ 3, $ 4 नामक गुणों के माध्यम से चुने गए अंतिम पांच तत्वों (या ढेर वस्तुओं) को उपलब्ध कराएगा। सबसे हाल ही में चयनित तत्व या ऑब्जेक्ट को $ 0 के रूप में संदर्भित किया जा सकता है, दूसरा सबसे हाल ही में $ 1 और इसी तरह।

यहाँ फायरबग के लिए कमांड लाइन एपीआई संदर्भ है जो इसके संदर्भों को सूचीबद्ध करता है।

$($0).scope()तत्व से जुड़े दायरे को लौटाएगा। आप इसके गुणों को तुरंत देख सकते हैं।

कुछ अन्य चीजें जो आप उपयोग कर सकते हैं वे हैं:

• एक तत्व मूल गुंजाइश देखें:

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

• आप इसे भी चेन कर सकते हैं:

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

• आप रूट स्कोप को देख सकते हैं:

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

• यदि आपने अलग-अलग दायरे के साथ एक निर्देश पर प्रकाश डाला है, तो आप इसे इस प्रकार देख सकते हैं:

$($0).isolateScope()

अधिक जानकारी और उदाहरणों के लिए अपरिचित Angularjs कोड डिबगिंग के लिए युक्तियाँ और चालें देखें ।

Answer 9

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

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

Answer 10

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

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

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

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

Answer 11

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

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

Answer 12

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

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

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

Answer 13

कहते हैं कि आप तत्व के दायरे तक पहुंचना चाहते हैं

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

आप कंसोल में निम्नलिखित का उपयोग कर सकते हैं:

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

यह आपको उस तत्व पर गुंजाइश देगा।

Comments

हमें यहाँ "document.querySelector" की जरूरत नहीं है

— Stepan Suvorov

Answer 14

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

उदाहरण

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

क्रोम का कंसोल

Answer 15

इसके लिए jQuery को भी स्थापित किया जाना आवश्यक है, लेकिन यह पूरी तरह से एक देव वातावरण के लिए काम करता है। यह प्रत्येक तत्व के माध्यम से दिखता है ताकि स्कोप के उदाहरण मिल सकें और फिर उन्हें नियंत्रक नामों के साथ लेबल किया गया। यह भी किसी भी संपत्ति को हटाने के लिए एक $ के साथ शुरू होता है जो कि एंगुलरज आमतौर पर अपने कॉन्फ़िगरेशन के लिए उपयोग करता है।

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

Answer 16

कोणीय में हम angular.element () द्वारा jquery तत्व प्राप्त करते हैं .... ग देता है ...

angular.element().scope();

उदाहरण:

<div id=""></div>

Answer 17

केवल डीबगिंग उद्देश्यों के लिए मैंने इसे नियंत्रक की शुरुआत में रखा।

   window.scope = $scope;

  $scope.today = new Date();

और इस तरह से मैं इसका उपयोग करता हूं।

तब हटाएं जब मैं डीबगिंग कर रहा हूं।

Answer 18

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

Answer 19

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

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

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

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

Comments

वैश्विक चर का उपयोग करना एक बुरा अभ्यास है, लेकिन मुझे लगता है कि यह ज्यादातर मामलों में ठीक है। यह केवल डिबगिंग के लिए ही है; लेकिन फिर भी आपको सावधान रहना होगा कि एक ही चर नाम का उपयोग दो बार न करें।

— पेड्रो अफोन्सो

यह एक बुरा विचार है क्योंकि इसके लिए आपको स्रोत कोड को संशोधित करना होगा। यह तब भी कष्टप्रद होता है, जब यह आपका अपना कोड हो, और असंभव हो अगर यह किसी अन्य सर्वर पर चल रहा हो। यहां तक ​​कि अगर आप कोड को संशोधित कर सकते हैं, तो भी आपको इसे पूर्ववत करना याद रखना होगा। इसलिए जब यह काम कर सकता है, तो यह सबसे अच्छा अभ्यास नहीं है।

— जिम डेविस

@JimDavis आम तौर पर मैं सहमत हूं, लेकिन ऐसे मामले हैं जब ऐसा करना उपयोगी होता है: स्रोतों को अस्थायी रूप से संशोधित करके आप कोड को उन चीजों को करने दे सकते हैं जिन्हें आपको बार-बार मैन्युअल रूप से करना होगा। इसलिए जब समस्या मुश्किल महसूस होती है और डिबगिंग लंबे समय तक होने वाली है, तो मैं कोड को संशोधित करता हूं। परिवर्तनों को पूर्ववत करना सही टूल (गिट) के साथ तुच्छ है।

— मआर्टिनस