injection - what is scope in angularjs




如何使用AngularJS訪問瀏覽器控制台中的$ scope變量? (11)

假設你想訪問元素的範圍

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

您可以在控制台中使用以下內容:

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

這會給你在這個元素的範圍。

我想在Chrome的JavaScript控制台中訪問我的$scope變量。 我怎麼做?

我不能在控制台中看到$scope或模塊myapp的名稱作為變量。


只需在範圍外定義一個JavaScript變量並將其分配給控制器中的範圍即可:

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

而已! 它應該可以在所有瀏覽器中使用(至少在Chrome和Mozilla中進行過測試)。

它正在工作,我正在使用這種方法。


在角我們通過angular.element()得到jquery元素....讓c ...

angular.element().scope();

例:

<div id=""></div>


在開發人員工具的HTML面板中選擇一個元素,然後在控制台中輸入:

angular.element($0).scope()

WebKit和Firefox中, $0是對元素選項卡中所選DOM節點的引用,因此通過執行此操作可以在控制台中打印出所選DOM節點作用域。

您也可以通過元素ID來定位範圍,如下所示:

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

插件/擴展

您可能想要查看一些非常有用的Chrome擴展程序:

  • Batarang 。 這已經有一段時間了。

  • ng-inspector 。 這是最新的,顧名思義,它允許您檢查應用程序的範圍。

玩jsFiddle

使用jsfiddle時,您可以在顯示模式下通過在URL末尾添加/show來打開小提琴。 像這樣運行時,您可以訪問angular全局。 你可以在這裡嘗試:

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

jQuery Lite

如果你在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/ : http://jsfiddle.net/jaimem/DvRaR/1/show/


將代碼中的斷點放在接近對$ scope變量的引用的地方(這樣$ scope就在當前的'普通舊JavaScript'範圍內)。 然後你可以檢查控制台中的$ scope值。


我同意在選擇一個對象(它與angular.element($0).scope()相同的情況下使用它的$scope是最好的,或者甚至與jQuery相比更短: $($0).scope() (我的最愛))

另外,如果像我一樣,你有主體作用於body元素, $('body').scope()可以正常工作。


我通常使用jQuery data()函數:

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

$ 0是當前在Chrome DOM檢查器中選定的項目。 $ 1,$ 2 ..等都是之前選擇的項目。


放在你控制器的某個地方(通常最後一行是個好地方)

console.log($scope);

如果你想看到一個內部/隱式的範圍,比如說在一個ng-repeat中,像這樣的東西就可以工作。

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

請注意,上面我們在父範圍中定義了showScope()函數,但沒關係,子/內部/隱式範圍可以訪問該函數,然後根據該事件輸出範圍,從而打印出與範圍相關的範圍發起事件的元素。

@ jm-的建議也可行但我認為它不適用於jsFiddle。 我在Chrome中的jsFiddle上遇到這個錯誤:

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


為了改善jm的回答...

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

要添加和增強其他答案,請在控制台中輸入$($0)以獲取元素。 如果它是Angularjs應用程序,則默認加載jQuery lite版本。

如果你不使用jQuery,你可以使用angular.element($ 0),如下所示:

angular.element($0).scope()

要檢查您是否有jQuery和版本,請在控制台中運行此命令:

$.fn.jquery

如果您檢查了某個元素,則當前選定的元素可通過命令行API參考$ 0獲得。 Firebug和Chrome都有這個參考。

但是,Chrome開發人員工具將使用這些引用通過名為$ 0,$ 1,$ 2,$ 3,$ 4的屬性選擇最後五個元素(或堆對象)。 最近選定的元素或對象可以被引用為$ 0,第二個最近的元素或對象可以被引用為$ 1等等。

這裡是Firebug命令行API參考,它列出了它的參考。

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

你可以使用的其他一些東西是:

  • 查看元素父範圍:

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

  • 你也可以鏈接:

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

  • 你可以看看根範圍:

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

  • 如果您突出顯示了隔離範圍的指令,您可以通過以下方式查看它:

$($0).isolateScope()

有關更多詳細信息和示例,請參閱調試不熟悉的Angularjs代碼的提示和技巧


這是在沒有Batarang的情況下獲得範圍的一種方法,您可以這樣做:

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

或者,如果您想通過控制器名稱查找範圍,請執行以下操作:

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

在對模型進行更改後,您需要通過調用以下方法將更改應用於DOM:

scope.$apply();




angularjs-scope