1294

$scopeChromeのJavaScriptコンソールで変数にアクセスしたいと思います。それ、どうやったら出来るの？

コンソール$scopeにモジュールの名前も変数として表示されません。myapp

4

19 に答える 19

1827

開発者ツールのHTMLパネルで要素を選択し、コンソールに次のように入力します。

angular.element($0).scope()

WebKitとFirefoxでは、は$0要素タブで選択されたDOMノードへの参照であるため、これを行うことにより、選択されたDOMノードスコープがコンソールに出力されます。

次のように、要素IDでスコープをターゲットにすることもできます。

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

アドオン/拡張機能

あなたがチェックしたいと思うかもしれないいくつかの非常に便利なChrome拡張機能があります：

  • バタラン。これはしばらく前からあります。

  • ng-インスペクター。これは最新のものであり、その名前が示すように、アプリケーションのスコープを検査することができます。

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/

于 2012-12-06T12:56:21.127 に答える
189

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要素にアクセスするもう1つの簡単な方法（jmで述べたように）は、[要素]タブでそれをクリックすることで、自動的にとして保存され$0ます。

angular.element($0).scope();
于 2013-04-02T04:49:14.257 に答える
72

Batarangをインストールした場合

次に、次のように書くことができます。

$scope

クロムの要素ビューで要素を選択した場合。参照-https ://github.com/angular/angularjs-batarang#console

于 2013-09-06T16:36:28.787 に答える
38

これは、バタランなしでスコープを取得する方法です。次のことができます。

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

または、コントローラー名でスコープを検索する場合は、次のようにします。

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

モデルに変更を加えたら、次のコマンドを呼び出して、変更をDOMに適用する必要があります。

scope.$apply();
于 2014-06-04T17:02:47.433 に答える
31

コントローラのどこかに（多くの場合、最後の行が適切な場所です）、

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

于 2012-12-06T21:16:25.333 に答える
10

これらの回答の多くに対する1つの注意点：コントローラーにエイリアスを設定すると、スコープオブジェクトはから返されたオブジェクト内のオブジェクトに含まれscope()ます。

たとえば、コントローラーディレクティブが次のように作成されている場合： コントローラーのプロパティ<div ng-controller="FormController as frm"> にアクセスするには、次のように呼び出します。startDateangular.element($0).scope().frm.startDate

于 2015-02-24T04:00:40.350 に答える
9

他の回答を追加および拡張するには、コンソールで、Enterキー$($0)を押して要素を取得します。Angularjsアプリケーションの場合、jQueryliteバージョンがデフォルトでロードされます。

jQueryを使用していない場合は、次のようにangular.element（$ 0）を使用できます。

angular.element($0).scope()

jQueryとバージョンがあるかどうかを確認するには、コンソールで次のコマンドを実行します。

$.fn.jquery

要素を検査した場合、現在選択されている要素は、コマンドラインAPIリファレンス$0から入手できます。FirebugとChromeの両方にこの参照があります。

ただし、Chromeデベロッパーツールは、これらの参照を使用して、$ 0、$ 1、$ 2、$ 3、$ 4という名前のプロパティから選択された最後の5つの要素（またはヒープオブジェクト）を利用できるようにします。最後に選択された要素またはオブジェクトは$0として参照でき、2番目に最近選択された要素またはオブジェクトは$1として参照できます。

これは、FirebugのコマンドラインAPIリファレンスであり、そのリファレンスがリストされています。

$($0).scope()要素に関連付けられたスコープを返します。そのプロパティをすぐに確認できます。

使用できるその他の機能は次のとおりです。

  • 要素の親スコープを表示します。

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

  • これも連鎖させることができます：

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

  • ルートスコープを確認できます。

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

  • 分離スコープでディレクティブを強調表示した場合は、次のように表示できます。

$($0).isolateScope()

詳細と例については、なじみのないAngularjsコードをデバッグするためのヒントとコツを参照してください。

于 2016-08-02T16:41:16.493 に答える
8

オブジェクトを選択した後のBatarangが最適であることに同意し$scopeます（jQueryと同じangular.element($0).scope()かそれよりも短い:($($0).scope()私のお気に入り））

また、私のようにbody要素のメインスコープを持っている場合は、正常に$('body').scope()機能します。

于 2014-01-23T23:54:54.747 に答える
7

$scopeグローバル変数として割り当てるだけです。問題が解決しました。

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

実際に$scopeは、本番よりも開発の方が頻繁に必要になります。

@JasonGoemaatによってすでに言及されていますが、この質問への適切な回答として追加しています。

于 2016-11-01T16:26:05.647 に答える
5

要素を調べて、コンソールでこれを使用します

s = $($0).scope()
// `s` is the scope object if it exists
于 2015-12-07T15:54:56.777 に答える
4

私はangular.element($(".ng-scope")).scope();過去に使用したことがあり、それは素晴らしい働きをします。ページにアプリスコープが1つしかない場合、または次のようなことができる場合にのみ有効です。

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

于 2016-12-13T21:16:35.250 に答える
3

私は通常、そのためにjQuery data（）関数を使用します。

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

$ 0は、現在chromeDOMInspectorで選択されているアイテムです。$ 1、$2..などは以前に選択されたアイテムです。

于 2015-08-03T20:53:04.453 に答える
3

最初に、検査するスコープ内にあるDOMから要素を選択できます。

ここに画像の説明を入力してください

次に、コンソールで次のクエリを実行して、スコープオブジェクトを表示できます。

angular.element($0).scope()

スコープの任意のプロパティをクエリできます。例：

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

または、スコープに接続されているコントローラーを検査できます。

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

（機能する別のオプションは、コードにブレークポイントを設定することです。$scopeが現在の「プレーンオールドJavaScript」スコープにある場合は$scope、コンソールでの値を調べることができます。）

于 2021-09-30T05:33:21.303 に答える
2

次のような要素のスコープにアクセスしたいとします。

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

コンソールで次を使用できます。

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

これにより、その要素のスコープが得られます。

于 2014-09-03T16:24:28.300 に答える
1

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

Chromeのコンソール ここに画像の説明を入力してください

于 2018-06-21T15:26:27.667 に答える
1

これにはjQueryもインストールする必要がありますが、開発環境では完全に機能します。各要素を調べてスコープのインスタンスを取得し、コントローラー名でラベル付けされたインスタンスを返します。また、angularjsがその構成に一般的に使用する$で始まるプロパティも削除します。

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;
        }
于 2019-06-18T22:19:31.477 に答える
0

角度では、angular.element（）....によってjquery要素を取得します。

angular.element().scope();

例：

<div id=""></div>

于 2017-12-12T09:19:38.473 に答える
0

デバッグの目的でのみ、これをコントローラーの先頭に配置します。

   window.scope = $scope;

  $scope.today = new Date();

そして、これが私がそれを使う方法です。

ここに画像の説明を入力してください

デバッグが終わったら削除します。

于 2019-03-08T17:05:16.587 に答える
-7

スコープ外でJavaScript変数を定義し、それをコントローラーのスコープに割り当てるだけです。

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

それでおしまい！すべてのブラウザで動作するはずです（少なくともChromeとMozillaでテスト済み）。

それは機能していて、私はこの方法を使用しています。

于 2015-06-17T08:52:34.597 に答える