AngularJS में, आप किसी पृष्ठ पर सभी स्कोप कैसे ढूंढते हैं?

Question

एक बार हमारे पास एक दायरा है, हम इसकी जड़ पर नेविगेट कर सकते हैं और स्कोप पदानुक्रम का पता लगा सकते हैं।

लेकिन क्या पृष्ठ पर सभी क्षेत्रों को खोजने का कोई सीधा तरीका है?

इसी प्रकार एक HTML तत्व दिया गया है, क्या इसके संलग्न क्षेत्र को खोजने का कोई सीधा तरीका है?

Answer 1

आप इस सीएसएस चयनकर्ता का उपयोग करके पृष्ठ पर स्कोप के सभी देख सकते

.ng-scope { border: 1px solid red; } 

और बाइंडिंग के सभी:

.ng-binding { border: 1px solid red; } 

फिर आप

var selector = angular.element(some_dom_element); 

तो गुंजाइश/नियंत्रक/इंजेक्टर

var scope = selector.scope(); 
var controller = selector.controller(); 
var injector = selector.injector(); 

पुनर्प्राप्त करने का भी उपयोग कर चयनकर्ता में डोम तत्व को परिवर्तित करके उन्हें प्राप्त कर सकते हैं

Answer 2

आप का उपयोग कर तत्व के लिए एक गुंजाइश पता कर सकते हैं:

$(element).scope() 

या

angular.element(element).scope() 

मुझे नहीं लगता कि वहाँ एक रास्ता आसानी से एक पृष्ठ पर सभी कार्यक्षेत्रों प्राप्त करने के लिए (नेविगेट के अलावा अन्य है रूट दायरे से नीचे)।

Answer 3

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

scopeElements = document.getElementsByClassName('ng-scope'); 
scopes = [].map.call(scopeElements, function(e){ return angular.element(e).scope(); }) 

अन्य विकल्प जड़ दायरे में शुरू होने वाली अपनी निजी API का उपयोग करके गुंजाइश पेड़ पार करने के लिए है: $ $ childHead और $$ अगला सिब्लिंग।

यह अधिक संभावना है कि आप बस जहां गुंजाइश सीमाएं हैं देखना चाहते है और आप इस के साथ यह कर सकते हैं:

scopeElements = document.getElementsByClassName('ng-scope'); 
angular.element(scopeElements).css('border', '1px solid red'); 

तो फिर तुम सिर्फ ब्याज का एक तत्व का चयन करें और अपने दायरे प्राप्त करने के लिए वेब निरीक्षक का उपयोग कर सकते द्वारा:

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

Answer 4

आपको Google Chrome ब्राउज़र में अपना एप्लिकेशन विकसित करना चाहिए (यदि आप इसे पहले से उपयोग नहीं कर रहे हैं) और आप भयानक बटरंग एक्सटेंशन का उपयोग कर सकते हैं जो नए समर्पित AngularJS pa जोड़ता है डेवलपर टूल्स के लिए नेल। आप वहां सभी स्कोप देख सकते हैं, उनके बीच संबंध क्या हैं और इसके सभी गुणों के मूल्य क्या हैं।

http://blog.angularjs.org/2012/07/introducing-angularjs-batarang.html

Answer 5

मैं AngularJS Batarang सलाह देते हैं। यह एक डिबगिंग टूल है जो आपको पृष्ठ पर सभी स्कोपों ​​को देखने की सुविधा देता है (अन्य चीजों के साथ)।

https://github.com/angular/angularjs-batarang

Answer 6

नहीं सभी कार्यक्षेत्रों तत्वों के लिए बाध्य कर रहे हैं।

function getScopes(root) { 
    var scopes = []; 

    function visit(scope) { 
     scopes.push(scope); 
    } 
    function traverse(scope) { 
     visit(scope); 
     if (scope.$$nextSibling) 
      traverse(scope.$$nextSibling); 
     if (scope.$$childHead) 
      traverse(scope.$$childHead); 
    } 

    traverse(root); 
    return scopes; 
} 

getScopes($rootScope) 

Answer 7

Angulars में वहाँ है $rootScope है, जो हर scope.It की जड़ है बच्चे क्षेत्र है और पूरे पदानुक्रम के अंदर है: आप पृष्ठ पर सभी स्कोप चाहते हैं, इस तरह गुंजाइश पेड़ चलना $ रूटस्कोप यदि आप एचटीएमएल तत्व के साथ एक गुंजाइश खोजना चाहते हैं, तो आपको शायद एक समस्या होगी, क्योंकि यह दायरा अलग गुंजाइश हो सकता है। शायद आपके पास कोई निर्देश है, जो दायरा अलग है। अगर आपके पास कुछ भी है कि, इस्तेमाल करने की कोशिश el.isolatedScope()

Answer 8

क्रोम में, डेवलपर उपकरण का उपयोग कर। मैं कंसोल कमांड लाइन का उपयोग करता हूं। एक पृष्ठ तत्व पर

angular.element($0).scope() 

या बस राइट क्लिक करें और चुनें:

डेवलपर उपकरण के एचटीएमएल पैनल में एक तत्व उठाओ और कंसोल में इस टाइप तत्व का निरीक्षण किया।

$($0).scope() तत्व से संबंधित गुंजाइश वापस आ जाएगी। आप तुरंत इसके गुण देख सकते हैं।

एक तत्व माता पिता गुंजाइश देखने के लिए:

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

आप कर सकते हैं श्रृंखला यह भी:

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

आप जड़ गुंजाइश देख सकते हैं:

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

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

$($0).isolateScope() 

उपलब्ध हैं, तो आप बच्चे गुंजाइश और भाई गुंजाइश के साथ भी ऐसा ही कर सकते हैं।

$($0).scope().$sibling 

मैं चल सकता है और स्कोप नीचे क्या गुंजाइश है क्या नियंत्रकों, वस्तुओं, आदि और जब आप कस्टम निर्देशों के साथ काम कर रहे हैं, यह जरूरी है सत्यापित करने के लिए। एक बड़े कोड बेस में, इस तरह की चीज़ों को ढूंढना इतना आसान नहीं है।

हाल ही में, मैं ही नाम के दो नियंत्रकों, एक अपरकेस एक दृश्य के साथ संलग्न पत्र के लिए बचाने के लिए किया था। मैं गलत नियंत्रक का उपयोग कर रहा था और मुझे कुछ समय लगा जब मुझे एहसास हुआ कि मेरे बाइंडिंग के साथ समस्या थी।