在AngularJS中，如何找到頁面上的所有範圍？

Question

一旦我們掌握了範圍，我們可以導航到其根目錄並探索範圍層次結構。

但是有沒有一種直接的方式來查找頁面上的所有範圍？

同樣給了一個HTML元素，是否有直接的方法來找到它的封閉範圍？

Answer 1

，你可以使用這個CSS選擇器看到所有範圍的頁面上

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

和所有綁定的：

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

然後，可以通過DOM元素轉換爲選擇檢索它們

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和$$ nextSibling。

它更可能你只是想看看那裏的範圍界限，你可以用這個做到這一點：

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

然後，你可以使用Web檢查來選擇感興趣的元素，並得到其範圍由：

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

Answer 4

您應該在Google Chrome瀏覽器中開發您的應用程序（如果您尚未使用它），並且您可以使用令人敬畏的Batarang擴展，並添加新的專用AngularJS pa nel到Developer工具。 您可以在那裏看到所有的範圍，它們之間的關係是什麼以及具有它所有屬性的值是什麼。

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的根具有孩子領域和整個層次是內部$ rootScope。如果你想找到一個帶有html元素的作用域，你可能會遇到問題，因爲該作用域可能是隔離的作用域。也許你有一個指令，那個作用域是隔離的。如果你有類似的東西那就試試用el.isolatedScope()

Answer 8

在Chrome中，使用開發人員工具。我使用控制檯命令行。

中的開發工具的HTML面板選擇的元素，並在控制檯輸入：

angular.element($0).scope() 

或者只是右鍵點擊一個頁面元素並選擇：檢查元素。

$($0).scope()將返回與該元素關聯的範圍。你可以馬上看到它的屬性。

要查看元素的父範圍：

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

你可以連續使用，這也：

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

你可以看一下根範圍：

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

如果你強調了指令與隔離範圍，你可以看看它：

$($0).isolateScope() 

如果可用，您可以對子作用域和同級作用域執行相同操作。

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

我可以步行上下範圍，以驗證哪些範圍有什麼控制器，對象等，當你使用自定義指令的工作，這是必不可少的。在一個龐大的代碼庫中，找到這樣的事情並不容易。

最近，我有兩個同名控制器，除了一個大寫字母附加到視圖。我使用了錯誤的控制器，並且在我意識到這是我的綁定問題之前花了一段時間。