angularjs-scope $rootscope - 如何使用AngularJS訪問瀏覽器控制台中的$ scope變量?




function directive (14)

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

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


Answers

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

另外,如果像我一樣,你有主體作用於body元素, $('body').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代碼的提示和技巧


為了改善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();

我用angular.element($(".ng-scope")).scope(); 在過去,它很好。 只有在頁面上只有一個應用程序範圍時才有用,或者您可以執行如下操作:

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


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

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

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

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


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

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


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

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

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


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

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

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

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

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

scope.$apply();

這些答案中的一個很重要:如果你的控制器是你的控制器,你的範圍對象將位於scope()返回的對像中。

例如,如果您的controller指令是這樣創建的: <div ng-controller="FormController as frm">然後要訪問控制器的startDate屬性,您可以調用angular.element($0).scope().frm.startDate



假設你想訪問元素的範圍

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

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

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

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


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


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

angular.element().scope();

例:

<div id=""></div>


方便的小幫手方法來保持這個過程DRY:

function safeApply(scope, fn) {
    (scope.$$phase || scope.$root.$$phase) ? fn() : scope.$apply(fn);
}




angularjs angularjs-scope