web-dev-qa-db-ja.com

AngularJSを使用してブラウザのコンソールで$ scope変数にアクセスする方法

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

コンソールでは、$scopeや自分のモジュール名myappを変数として見ることはできません。

angularjsangularjs-scope
1189
murtaza52

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

angular.element($0).scope()

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

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

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

アドオン/拡張機能

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

  • バタラン 。これはしばらく前から出回っています。

  • ng-inspector 。これは最新のもので、その名前が示すように、アプリケーションのスコープを調べることができます。

jsFiddleで遊ぶ

Jsfiddleを使用している場合は、URLの最後に/showを追加することで、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/

1691
jaime

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が言及したように） 'elements'タブでそれをクリックすることで、それは自動的に$0として保存されます。

angular.element($0).scope();
179
Simon East

インストールした場合 Batarang

それからあなたはちょうど書くことができます：

$scope

要素ビューで要素を選択しているときは、クロムで表示します。参照 - https://github.com/angular/angularjs-batarang#console

72
chrismarx

これは、Batarangを使わずにスコープを取得する方法です。

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

または、コントローラ名で自分のスコープを見つけたい場合は、次のようにします。

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

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

scope.$apply();
34
BraveNewMath

あなたのコントローラのどこかに（しばしば最後の行が良い場所です）、置く

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

@ jm-さんの提案も効いています、 しかし、私はそれがjsFiddleの中で機能するとは思わない。 Chrome内部のjsFiddleでこのエラーが発生します。

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

これらの答えの多くへの1つの警告：あなたがあなたのコントローラをエイリアスするならば、あなたのスコープオブジェクトはscope()から返されたオブジェクト内のオブジェクトの中にあるでしょう。

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

10
Michael Blackburn

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

また、私のようにあなたがbody要素の主なスコープを持っているのなら、$('body').scope()はうまく働きます。

8
Dorian

要素を調べて、コンソールでこれを使う

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

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

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

4
Mike

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

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

実際には、本番よりも開発中のほうが$scopeを必要としています。

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

4
Sandeep

他の回答を追加および拡張するには、コンソールで$($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()

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

4
James Drinkard

私は通常jQueryのdata（）関数を使います。

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

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

3
wojtekc

要素のスコープにアクセスしたいとしましょう。

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

あなたは、コンソールで以下を使うことができました：

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

これにより、その要素の範囲がわかります。

2
Praym

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のコンソール enter image description here

0
Khachornchit Songsaen

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

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

angular.element().scope();

例：

<div id=""></div>

0
Rizo

デバッグ目的のためだけに、これをコントローラの先頭に置きます。

   window.scope = $scope;

  $scope.today = new Date();

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

enter image description here

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

0
mcvkr

$ scope変数への参照の近くのどこかにコード内にブレークポイントを置きます（$ scopeが現在の '普通のJavaScript'スコープ内になるように）。その後、コンソールで$ scopeの値を調べることができます。

0
Chris Halcrow