AngularJSを使用してブラウザーのコンソールで$ scope変数にアクセスするにはどうすればよいですか？

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

コンソールで$scopeモジュールの名前をmyapp変数として表示することも、表示することもできません。

開発者ツールの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/

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で述べたように）は、「要素」タブでDOM要素をクリックすると、自動的にとして保存され$0ます。

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

バタランをインストールした場合

それからあなたはただ書くことができます：

$scope

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

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

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

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

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

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

scope.$apply();

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

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（）関数を定義していますが、問題ありません... child / inner / implicitスコープはその関数にアクセスでき、イベントに基づいてスコープを出力します。イベントを発生させた要素

@ jm-の提案も機能しますが、jsFiddle内では機能しないと思います。Chrome内のjsFiddleでこのエラーが発生します。

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

これらの答えの多くに対する1つの警告：コントローラにエイリアスを付ける場合、スコープオブジェクトはから返されたオブジェクト内のオブジェクトになりますscope()。

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

私は$scope、オブジェクトを選択した後のバタランが最善であることに同意します（angular.element($0).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という名前のプロパティを通じて選択された最後の5つの要素（またはヒープオブジェクト）を利用できるようにします。最後に選択した要素またはオブジェクトは$ 0として、2番目に選択した要素またはオブジェクトは$ 1として参照できます。

以下は、FirebugのコマンドラインAPIリファレンスで、そのリファレンスを一覧表示しています。

$($0).scope()要素に関連付けられたスコープを返します。あなたはすぐにそのプロパティを見ることができます。

あなたが使用できる他のいくつかのものは：

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

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

• これもチェーンできます：

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

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

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

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

$($0).isolateScope()

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

要素を検査し、コンソールでこれを使用します

s = $($0).scope()
// `s` is the scope object if it exists

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

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

実際に$scopeは、プロダクションよりも開発のほうが必要です。

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

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

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

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

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

$ 0はChrome DOMインスペクターで現在選択されているアイテムです。$ 1、$ 2 ..などは以前に選択されたアイテムです。

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

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

コンソールでは以下を使用できます。

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

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

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のコンソール

これには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;
        }

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

angular.element().scope();

例：

<div id=""></div>

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

   window.scope = $scope;

  $scope.today = new Date();

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

デバッグが完了したら削除します。

コードに$ scope変数への参照に近い場所にブレークポイントを配置します（$ scopeが現在の「プレーンな古いJavaScript」スコープにあるようにします）。次に、コンソールで$ scope値を検査できます。

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

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

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

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