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

Question

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

angular.element($0).scope()

でウェブキットFirefox では、これは$0要素タブで選択された DOM ノードへの参照なので、これを行うと、選択された DOM ノードのスコープがコンソールに出力されます。

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

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

アドオン/拡張機能

ぜひチェックしていただきたい、非常に便利な Chrome 拡張機能がいくつかあります。

jsFiddleで遊ぶ

jsfiddle を使用する場合、URL の末尾にを追加することで、fiddle を表示モードで開くことができます。このように実行すると、グローバルにアクセスできます。ここで試すことができます:/showangular

jQuery ライト

AngularJSの前にjQueryをロードすると、angular.elementjQueryセレクターを渡すことができます。そのため、コントローラーのスコープを調べるには、

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

Answer 1