AngularJSでAPLを作る際に、Chrome開発者ツールのコンソールで使える小技のお話.
Chromeの開発者ツールでは、のElementペインで最後に選択した要素は、コンソールから、$(0〜4の番号) で参照できる.
例えば、直前に選択したDOM要素は、$0 だ。
AngularJSのオブジェクトはangular.elementから辿ることが出来るので、直前に開発者ツールのElementペインで選択していた要素に紐づくScopeを取得するには、下記をコンソールで実行すればよい.
$0のscopeを取得
angular.element($0).scope()
$apply を使えば、コンソールからの値書き換えも出来る.
scopeの値を変更&画面へ反映
(s=angular.element($0).scope()).$apply(function(){s.foo='new Value!';});
DOMからは、$injector にもアクセス出来るので、任意のサービスをコンソールから呼び出すことも出来る.
任意のServiceを取得
angular.element($0).injector().get('サービス名')
また, jQueryも併せて利用している場合, 上記のscope取得等は、下記まで短縮して書くことが可能.
$($0).scope()