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

質問

にアクセスしたいのですが。 $scope 変数をChromeのJavaScriptコンソールで使用することができます。どうすればいいですか？

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

どのように解決するのですか？

開発者ツールのHTMLパネルで要素を選び、コンソールにこのように入力してください。

angular.element($0).scope()

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

また、このように要素IDでスコープを絞ることもできます。

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

アドオン/エクステンション

Chromeの拡張機能で、とても便利なものがあります。

• バタラン . これは以前からあるものです。

• ng-inspector . これは一番新しいもので、その名の通り、アプリケーションのスコープを検査することができます。

jsFiddleで遊ぶ

jsfiddleで作業する場合、フィドルを開くには 見せる モードでは /show をURLの末尾に追加してください。このように実行すると 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/